我发现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组件的数组数据的正确方法吗?还是我遗漏了什么?
2条答案
按热度按时间yh2wf1be1#
你似乎没有使用React内置的状态管理。如果你使用了,两种更新状态的方法之间的一个中间点将起作用。当组件的状态或属性发生变化时,它将重新呈现。
编辑:这段代码已经过时了,不是好的实践。
通过执行以下操作初始化组件状态
你的render方法从这里渲染:
handlePersonClick可以是方法的合并:
}
编辑:以上是非常无知的早期React对我来说。我已经更新了下面的小提琴链接,它应该作为一个很好的解决这个问题的基本例子。
完整jsfiddle
9udxz4iz2#
我认为你做错了。你可能会从Angular js来React。而不是使用一个函数,来操纵对象,使用useState。本地状态与在组件。
样品: