React中使用useState第一次改变页面渲染，后面值变化页面没有重新渲染

问题描述：

最近项目上面用ant组件Modal里面插入可编辑表格一同编辑，可编辑表格使用useState第一次改变页面渲染，后面值变化了，但是表格页面没有重新渲染。

    try {
      const row = await form.validateFields();
      const arr = data.Persons;

      if (arr[index].isAdd) {
        delete arr[index].isAdd;
      }
      const item = arr[index];
      arr.splice(index, 1, { ...item, ...row });
      let newsData = data;
      newsData = Object.assign(newsData, { Persons: arr });
      setData(newsData);
      setEditingKey('');
    }

后面查找了一下原因，发现是因为react中数组如果引用地址不变，虽然值的确是变化了，但是不会触发重新渲染。

---

解决方案：

    try {
      const row = await form.validateFields();
      const arr = data.Persons;

      if (arr[index].isAdd) {
        delete arr[index].isAdd;
      }
      const item = arr[index];
      arr.splice(index, 1, { ...item, ...row });
      let newsData = data;
      newsData = Object.assign(newsData, { Persons: [...arr] }); //克隆的时候改变地址
      setData(newsData);
      setEditingKey('');
    }

这里要根据react的渲染机制源码，因为react 会判断旧状态和新状态是否有变化，如果没有变化就不渲染，所以要改变地址告诉render 是新状态要重新渲染。参考文章

---