如何更新React组件的数组？

I have found that React does not update a component when an element in the array is changed. Instead, a new array must be cloned and put in its place.

我发现当数组中的元素发生更改时,React不会更新组件。相反,必须克隆一个新数组并放在其位置。

For example, I have an array of _suggestedPeople. When the UI element representing one of these people is clicked, I'd like to register this by calling selectPerson.

例如,我有一个_suggestedPeople数组。当点击代表其中一个人的UI元素时,我想通过调用selectPerson来注册它。

I would expect React to update after doing this:

我希望React在执行此操作后更新:

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

However, I end up doing this instead, which seems unnecessary:

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

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;
  },

Is this the latter the correct way to update the array data of a React component? Or am I missing something?

这是后者更新React组件的数组数据的正确方法吗?或者我错过了什么?

1 个解决方案

#1

You don't appear to be using React's built in state management. If you do, a middle ground between your two approaches of updating the state will work. A component will re-render when it's state or properties change at all.

您似乎没有使用React的内置状态管理。如果你这样做,你的两种更新状态方法之间的中间地位将起作用。当一个组件的状态或属性发生变化时,它将重新呈现。

Edit: This code is outdated and not good practice. See updated jsfiddle below

编辑:这段代码已经过时,不是很好的做法。请参阅下面更新的jsfiddle

Initialise the components state by implementing

通过实现初始化组件状态

getInitialState: function () {

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

   return {
       suggestedPeople: whereverItComesFrom
   }
}

your render method renders from this:

你的渲染方法渲染:

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 can be a merge of your methods:

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});

}

Edit: The above was very ill informed early days react for me. I've updated the fiddle link below and it should serve as a good basic example of solving this problem.

编辑:以上是非常不明智的早期对我的反应。我已经更新了下面的小提琴链接,它应该是解决这个问题的一个很好的基本例子。

Full jsfiddle

#1