react使用antd table组件key值不变出现列表行数据不重新渲染问题

给table绑定newData数据源，给每行数据源绑定key为id

 

​

<Table className="form-table"
    dataSource={[...newData]} style={{width: '100%'}}
    columns={editData ? this.newHeaders : this.addHeaders.concat(this.newHeaders)}
    rowKey='id' scroll={{x: 840}} pagination={false}
/>

[点击并拖拽以移动]
​

 初次渲染表格----第一行id为0，空数据。

 当点击导入返回数据后，为返回的数据手动添加id

if (file.status === 'done' && file.response.code === 200) {
    const importData = file.response.data;
    importData.forEach((item, index) => {
        item.id =index;
    });
    console.log(importData);
    this.setState({
        newData: importData
    });
} else if (file.status === 'error') {
    file.response ? message.error(file.response.message) : message.error(`${file.name} 导入失败！`);

}

此时导入回来之后的数据为

 页面展示第一行并没有改变，这是因为手动添加id时第一行的id仍然是为0，个人认为是React检测state中的newData地址中的数据的第一个仍然是0，也就是说React认为虚拟DOM并没有改变，所以没有重新渲染页面。

 此时可以在获取数据后手动添加第id时为id赋不一样的值，这里我选择的是加上时间戳。

if (file.status === 'done' && file.response.code === 200) {
    const importData = file.response.data;
    importData.forEach((item, index) => {
        item.id = `${index}${new Date()}`;//为id加上时间戳
    });
    console.log(importData);
    this.setState({
        newData: importData
    });
} else if (file.status === 'error') {
    file.response ? message.error(file.response.message) : message.error(`${file.name} 导入失败！`);

}

 

 加上后即正常。