Skip to main content

react redux 更新列表中的某个属性时需要注意

· One min read

常常会碰到这种需求,对列表中的某个元素进行操作,然后改变这个对象的一个属性值。

今天就在这里踩到了坑。也算是对react渲染机制加深的理解。

是这样的,我有一个好友列表,需要点击添加操作来加好友,而这个用户的对象中有一个属性值是isFriend,再添加成功后需要对其进行改变。

当然,通常的思路就是,把这个列表中的这行记录的那个属性值设为true即可,添加按钮就隐藏掉。 untitled1.png

我在reducer中循环匹配,匹配成功的话就isFriend设置为true,但是呢,奇怪的事情发生了,界面并没有像预想的一样隐藏掉添加按钮。

代码片段如下:

    newArr = oldState.contactsList.map(function mapFunc(contact) {
var result = contact;

if (result.id === action.data) {
result.isFriend = true;
}
return result;
});

return Object.assign({}, oldState, {
contactsList: newArr,
});

看起来确实没有什么不对劲的呀,我打开react-dev-tool看组件的值,也确实改变过来了。什么鬼呢?!

后来找了找,给了我启发,于是动手试了试,果然是因为数组中的对象的引用未改变导致未重新渲染。

修正后的代码如下:

    if (result.id === action.data) {
// 不能直接赋值,此处直接赋值,引用不变,被认为对象为改变,则不重新渲染
result = Object.assign({}, result, {isFriend: true});
}