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

最新推荐文章于 2023-10-10 00:45:00 发布

原创最新推荐文章于 2023-10-10 00:45:00 发布 · 2.6k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

菜鸟David再敲代码

关注

标签

#react.js #javascript #前端

分类前端开发

本文讲述了如何在React中使用Table组件时，初次渲染时遇到的第一行id为0的问题。通过手动为导入后的数据添加唯一id，尤其是通过时间戳区分，解决了数据更新但页面未刷新的问题。重点在于理解React虚拟DOM更新策略和如何触发组件重新渲染。

给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} 导入失败！`);

}

加上后即正常。