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

luoyjx · 2016-09-14 12:59 · 1160次阅读

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

今天就在这里踩到了坑。也算是对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});
	}
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册