react16在不更新引用的情况下怎么刷新控件

Question

项目从react15升级到**react16**后遇到一个不刷新的问题，我知道16对于props的校验更为严格了，如果引用不变是不会触发控件刷新的。

但是我们的项目自己做了数据的双向绑定，所以很希望我们在使用**antd**的**Table**时，**datasource**的引用不要变，变了会很麻烦。

所以想请问各位大佬，有没有办法，在datasource的引用不变的情况下（也不希望一直刷新key），仍然能让antd的table重新渲染。

需求场景就是像表格内添加、删除数据这种。谢谢！

Answer 1

参考GPT和自己的思路：

对于这种情况，可以使用以下方法来强制刷新antd的Table：

1. 调用Table组件的forceUpdate方法，让组件重新渲染。代码如下：

<Table
  dataSource={dataSource}
  columns={columns}
  ref={(table) => { this.table = table; }}
/>
...
this.table.forceUpdate();

1. 在Table的dataSource数据发生改变时，手动修改这个数据的一个属性，使得这个属性的值改变，从而强制触发组件的重新渲染。代码如下：

constructor(props) {
  super(props);
  this.state = {
    dataSource,
    dataVersion: 0,
  };
}
...
handleAddData = () => { // 添加数据的方法
  const { dataSource, dataVersion } = this.state;
  const newData = getNewData(); // 获取新数据
  this.setState({
    dataSource: [...dataSource, newData],
    dataVersion: dataVersion + 1, // 强制刷新组件
  });
};
...
<Table dataSource={dataSource} columns={columns} key={dataVersion} />

以上两种方法可以让您在datasource不变的情况下，仍然能让antd的table重新渲染，适用于表格内添加、删除数据等需求场景。