更新state后Ant Design Table未重新渲染，如何触发dataSource刷新？

问题根因 #

• 你仅对最外层documents对象做了浅拷贝，内层Data数组仍然复用了原状态的引用
• 直接通过下标修改数组元素的操作属于修改原数组内部值，没有生成新的数组引用
• React 状态更新默认执行浅比较，Antd Table 对dataSource的重渲染判断依赖数组引用的变化，旧引用的数组内部值变更不会触发Table重渲染

修复方案 #

方案1：用map生成新数组（推荐） #

直接遍历数组匹配对应Id替换，生成全新的Data数组：

const UpdateDocument = (row) => {
  setDocuments(prev => ({
    ...prev,
    Data: prev.Data.map(item => item.Id === row.Id ? row : item)
  }));
};

方案2：浅拷贝原数组后修改 #

如果要保留原有查找下标的写法，先拷贝Data数组生成新引用再修改：

const UpdateDocument = (row) => {
  let fakeList = { ...documents };
  // 对Data数组做浅拷贝生成新引用
  fakeList.Data = [...fakeList.Data];
  let item = fakeList.Data.find((x) => x.Id === row.Id);
  let index = fakeList.Data.indexOf(item);
  fakeList.Data[index] = row;
  setDocuments(fakeList);
};

两种方案都会生成新的Data数组引用，Table检测到dataSource变化后就会自动触发重渲染。

内容的提问来源于stack exchange，提问作者juniorFrontEndDD