ReactNative state更新，视图不更新的问题

Posted 2020-11-19 cui-cui

开发中遇到这样的问题，我更新了state一个数组的某个元素的选中状态，打印出的数据也显示修改正确了，但是界面却没更新。例如下图点击某项修改选中状态。

代码中之前是这样写的，结果界面没有更新。

var array=this.state.list;

var items=array[index];
items.selected=!items.selected;

this.setState({
    list: array
})

console.log(this.state.list)

后面查了一下资料，因为FlatList组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。（译注：这一段不了解的朋友建议先学习下js中的基本类型和引用类型。）

 

所以，当state内存放的数据为数组时候，实质上是一个引用，就算是state内push了一个数据，这时候是不会触发更新的。这里我是新建了一个数组解决的，修改后的代码如下：

var list=[];
list=list.concat(this.state.list);

list[index].selected=!list[index].selected;
this.setState({
    list: list
})

console.log(this.state.list)