【react】table组件编辑单元格useCallback没有更新

最新推荐文章于 2024-04-29 20:08:54 发布

原创最新推荐文章于 2024-04-29 20:08:54 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

这篇博客讨论了在React应用中遇到的一个问题：当尝试通过handleSave函数更新表格数据源时，由于dealTableColumns传递的handleSave事件引用未更新，导致编辑单元格时数据恢复原始状态。作者提出了一个解决方案，即改变handleSave的实现方式，使用setDataSource的回调函数以确保每次更新时都得到新的handleSave引用。这解决了编辑过程中数据不一致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table单元格编辑触发handleSave函数保存并更新数据

相关文档：https://reactjs.org/docs/faq-state.html

/* 
  setDataSource的时候handleSave更新了
  但是dealTableColumns传给单元格的handleSave事件还是旧的
  导致编辑单元格时，修改多次数据会出现前面修改的数据恢复原始数据
  useCallback没有更新dealTableColumns里面的handleSave
*/
const handleSave = useCallback((row) => {
    const newData = [...dataSource];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, { ...item, ...row });
    setDataSource(newData)
}, [dataSource])

/* 修改如下
  将赋值写成函数的形式，dataSource作为参数传入
*/
const handleSave = useCallback((row) => {
    setDataSource((dataSource) => {
        const newData = [...dataSource];
        const index = newData.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        return newData
    })
}, [])

const dealTableColumns = tableColumns => {
        let columnList = _.cloneDeep(tableColumns);
        columnList = columnList.map(col => {
            return col.editable ? {
                ...col,
                onCell: (record) => ({
                    record,
                    editable: col.editable,
                    dataIndex: col.dataIndex,
                    title: col.title,
                    handleSave: handleSave
                })
            } : col
        });
        return columnList;
    };