当使用 @tanstack/react-table 时，若通过父组件传入的 data prop 发生变化但表格未更新，根本原因是 useReactTable 的 data 选项未被 React 视为响应式依赖——需将其托管于本地 useState，确保数据变更能触发 table 实例重建。
当使用 `@tanstack/react-table` 时，若通过父组件传入的 `data` prop 发生变化但表格未更新，根本原因是 `usereacttable` 的 `data` 选项未被 react 视为响应式依赖——需将其托管于本地 `usestate`，确保数据变更能触发 table 实例重建。
useReactTable 是一个 纯函数式 Hook，它在初始化时读取 data 并构建内部行模型（如 getCoreRowModel），但不会自动监听 data 引用的变化。即使父组件重新渲染并传入新数组，只要 useReactTable 的依赖项（尤其是 data）未显式声明为响应式状态，其返回的 table 实例将沿用旧数据缓存，导致 table.getRowModel().rows 始终反映初始或上一次构建时的数据。
✅ 正确做法：将传入的 data prop 同步到组件内部的 useState，并将其作为 useReactTable 的 data 参数：
const TableComponent = ({
columnFilters,
setColumnFilters,
columns,
data: externalData, // 重命名避免混淆
// ...其他 props
}) => {
// ✅ 关键：用 useState 托管数据，使其成为响应式依赖
const [tableData, setTableData] = useState(externalData);
// ✅ 每次 externalData 变化时同步更新本地 state（推荐使用 useEffect）
useEffect(() => {
setTableData(externalData);
}, [externalData]);
const table = useReactTable({
data: tableData, // 使用响应式 state 而非原始 prop
columns,
state: {
rowSelection,
globalFilter,
columnFilters,
pagination,
},
onPaginationChange: setPagination,
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
onColumnFiltersChange: setColumnFilters,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onGlobalFilterChange: setGlobalFilter,
debugTable: false,
});
return (
<div>
{table.getRowModel().rows.map((row) => (
<div key="{row.id}">{/* 渲染逻辑 */}</div>
))}
</div>
);
};
⚠️ 注意事项：
- 不要直接在
useReactTable中使用data: externalData—— 即使externalData是新引用，useReactTable内部不会自动重建模型； -
useEffect同步是必要保障：确保父组件传入新data时，tableData状态更新，从而触发useReactTable重新执行（因其依赖tableData）； - 若
externalData是深度嵌套对象或需浅比较优化，可配合useMemo或自定义比较逻辑，但多数场景下数组引用变更已足够触发更新； - 避免在每次渲染中新建
columns或state对象（如{ rowSelection }），否则会引发不必要的 table 重建——建议对稳定配置做useMemo缓存。
总结：TanStack React Table 的 data 必须是稳定的响应式值。将其接入 useState 并受控更新，是保证表格内容与外部数据严格同步的最简、最可靠方式。
