项目从react15升级到**react16**后遇到一个不刷新的问题,我知道16对于props的校验更为严格了,如果引用不变是不会触发控件刷新的。
但是我们的项目自己做了数据的双向绑定,所以很希望我们在使用**antd**的**Table**时,**datasource**的引用不要变,变了会很麻烦。
所以想请问各位大佬,有没有办法,在datasource的引用不变的情况下(也不希望一直刷新key),仍然能让antd的table重新渲染。
需求场景就是像表格内添加、删除数据这种。谢谢!
参考GPT和自己的思路:
对于这种情况,可以使用以下方法来强制刷新antd的Table:
<Table
dataSource={dataSource}
columns={columns}
ref={(table) => { this.table = table; }}
/>
...
this.table.forceUpdate();
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重新渲染,适用于表格内添加、删除数据等需求场景。