@tanstack/react-table数据更新后表格未同步问题求助

我正在使用@tanstack/react-table展示列表，表格行数据通过props（data）传入组件：

const TableComponent = ({
    columnFilters,
    setColumnFilters,
    columns,
    data,
    // ... 其他props
})

通过以下代码创建table变量：

const table = useReactTable({
    data,
    columns,
    state: {
        rowSelection,
        globalFilter,
        columnFilters,
        pagination
    },
    onPaginationChange: setPagination,
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onGlobalFilterChange: setGlobalFilter,
    debugTable: false
})

随后通过table.getRowModel().rows.map渲染表格行。但父组件修改data后，子组件中打印data已更新，table.getRowModel().rows却仍为旧数据，请问如何正确更新数据以同步表格内容？

1. 保证data的不可变更新 #

@tanstack/react-table依赖不可变数据模式感知数据变化。如果父组件直接修改原数组（比如用push、splice修改数组，或直接修改数组元素的属性），表格无法检测到变化。必须通过创建新数组的方式更新：

// 错误：直接修改原数组
data.push(newRow);
// 正确：生成新数组
setData(prev => [...prev, newRow]);

// 修改数组元素属性的正确写法
setData(prev => prev.map(item => 
    item.id === targetId ? {...item, status: '已更新'} : item
));

2. 手动触发表格行模型重置（可选） #

如果无法保证data的不可变更新，可以监听data变化，手动调用表格的重置方法：

useEffect(() => {
    table.resetRowModel();
}, [data, table]);

3. 确保columns引用稳定 #

如果columns是组件内部动态生成的（比如每次渲染都创建新数组），会干扰表格对data变化的检测。需要用useMemo缓存列配置：

const columns = useMemo(() => [
    {
        accessorKey: 'id',
        header: 'ID'
    },
    // 其他列配置
], []);

核心逻辑 #

useReactTable通过data、columns等参数的引用变化判断是否需要重新计算表格状态。只有当这些参数的引用改变时，表格才会重新初始化并更新行模型。

内容的提问来源于stack exchange，提问作者Amin Noura