之前在做React开发时，setState后数据更新了，但是页面却没有重新渲染，这是个什么情况😳

概述

原代码是这样的：

setName = (index, name) => {
    const { list } = this.state;
    list[index].name = name;
    this.setState({
        list,
    });
}

执行这个方法之后，发现页面展示数据没有按照预想的那样更新。

于是我去render函数里加了一句打印，发现之后上面这个方法之后，render函数里的打印语句根本就没有执行。

手动狗头

这才突然想到，我改变了这个数组的数据，却没有改变这个数组的地址，所以并没有触发render函数。

于是我拿到数组之后，先进行深拷贝，然后再做其他的操作。

setName = (index, name) => {
    const { list } = this.state;
    const tempList = JSON.parse(JSON.stringify(list));
    tempList[index].name = name;
    this.setState({
        list: tempList,
    });
}

结论

修改数组数据，一定要先做深拷贝，然后修改深拷贝得到的数组。

拓展

其实JSON.parse(JSON.stringfy())、Object.assign()……这些虽然是“深拷贝”，但是只能深拷贝一层。

如果实际开发中的业务数据非常复杂，要操作的数据有很多层嵌套，那么仅仅使用一次这些所谓的深拷贝方法是无法达到我们的目的的。

这个时候想要完成我们的数据更新渲染，可以有3种办法：

  1. 根据数据的深度多次使用这些“深拷贝”方法；
  2. 使用递归自己编写一个深拷贝的方法；
  3. 使用React提供的forceUpdate()方法，但是这个方案要慎用！因为这个方法会让页面强制刷新，不论数据是否改变。