javascript 如何更新React组件的数组?

noj0wjuj  于 2023-01-11  发布在  Java
关注(0)|答案(2)|浏览(153)

我发现React在数组中的元素改变时并不更新组件,而是必须克隆一个新的数组并将其放在原来的位置。
例如,我有一个_suggestedPeople数组,当代表其中一个人的UI元素被点击时,我想通过调用selectPerson来注册这个数组。
我希望React在这样做后更新:

selectPerson: function(personID, selected) {
    var person = _.find(_suggestedPeople, {id: personID});
    if (person) {
      person.selected = selected; 
    }
    return person;
  },

但是,我最终还是这样做了,这似乎是不必要的:

selectPerson: function(personID, selected) {
    var index = _.findIndex(_suggestedPeople, {id: personID});
    var found = index !== -1;
    if (found) {
      var people = _.cloneDeep(_suggestedPeople);
      people[index].selected = selected;
      _suggestedPeople = people; 
    }
    return found;
  },

这是更新React组件的数组数据的正确方法吗?还是我遗漏了什么?

yh2wf1be

yh2wf1be1#

你似乎没有使用React内置的状态管理。如果你使用了,两种更新状态的方法之间的一个中间点将起作用。当组件的状态或属性发生变化时,它将重新呈现。
编辑:这段代码已经过时了,不是好的实践。
通过执行以下操作初始化组件状态

getInitialState: function () {

   var whereverItComesFrom = [
      {id: 1, selected: false},
      {id: 2, selected: false}
   ];

   return {
       suggestedPeople: whereverItComesFrom
   }
}

你的render方法从这里渲染:

render: function () {
    var _this = this;
    var peeps = this.state.suggestedPeople.map(function(person, index){
        return <label key={index}><input type='checkbox' checked={person.selected} value={person.id} onChange={_this.handlePersonClick}/>{person.id}</label>;
    });

    return <div>{peeps}</div>;
},

handlePersonClick可以是方法的合并:

handlePersonClick: function(e) {
    var selectedId = e.target.value;
    var checked = e.target.checked;
    var peeps = this.state.suggestedPeople;
    var index = _.findIndex(peeps, {id: selectedId});

    peeps[index].selected = checked;

    this.setState({suggestedPeople: peeps});

}
编辑:以上是非常无知的早期React对我来说。我已经更新了下面的小提琴链接,它应该作为一个很好的解决这个问题的基本例子。
完整jsfiddle

9udxz4iz

9udxz4iz2#

我认为你做错了。你可能会从Angular js来React。而不是使用一个函数,来操纵对象,使用useState。本地状态与在组件。

样品:

const Comp = () => {
  const [selectedPerson, setSelectedPerson] = useState({});
  function onSelect(personID, selected) {
    var person = _.find(_suggestedPeople, { id: personID });
    if (person) {
      person.selected = selected;
    }
    setSelectedPerson(person);
  }
  return (
    <div>
      {selectedPerson.name}
      <select>
        <option onSelect={() => onSelect(id, "ssjsjs")}></option>
      </select>
    </div>
  );
};

相关问题