当使用 @tanstack/react-table 时，若父组件传入的 data 更新但表格未重新渲染，根本原因是 useReactTable 未监听外部 prop 的变化；需将 data 提升为本地 state 并在 prop 变化时同步更新，确保 table 实例响应式重建。
当使用 @tanstack/react-table 时，若父组件传入的 `data` 更新但表格未重新渲染，根本原因是 `usereacttable` 未监听外部 prop 的变化；需将 `data` 提升为本地 state 并在 prop 变化时同步更新，确保 table 实例响应式重建。
useReactTable 是一个 纯函数式 Hook，它在初始化时读取 data 的当前值并构建内部行模型（如 getCoreRowModel），但不会自动订阅 data 引用的变化。这意味着：即使父组件重新渲染并传入新 data 数组，只要 TableComponent 自身未触发重渲染或 useReactTable 未被重新调用，其内部缓存的 getRowModel().rows 仍将基于旧数据。
✅ 正确做法是：将 data 作为本地状态管理，并在接收到新 prop 时显式同步。推荐使用 useEffect 监听 props.data 变化：
const TableComponent = ({
columnFilters,
setColumnFilters,
columns,
data: externalData, // 重命名以区分
// ...其他 props
}) => {
const [data, setData] = useState(externalData);
// 关键：当父组件传入新 data 时，更新本地 state
useEffect(() => {
setData(externalData);
}, [externalData]);
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,
});
return (
<table>
{/* 渲染逻辑 */}
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>{cell.renderValue()}</td>
))}
</tr>
))}
</table>
);
};⚠️ 注意事项：
- ❌ 不要直接将
props.data传入useReactTable({ data: props.data })—— 这会导致 stale closure 问题； - ✅
useEffect依赖数组必须包含externalData（即原始 prop），且确保externalData是稳定引用（如来自useState或useMemo）； - ? 若
externalData是深度嵌套对象或频繁更新的数组，可考虑添加浅比较优化（例如useDeepCompareEffect），但多数场景下JSON.stringify或lodash.isEqual开销较大，优先保证父组件传入的是新引用（如useMemo包裹的数组）； - ? 表格其他状态（如
columnFilters、pagination）本身已是本地 state，无需额外处理，仅data需要此同步机制。
总结：useReactTable 依赖数据的引用稳定性与显式更新。将外部数据桥接到本地 state 并通过 useEffect 同步，是确保表格实时响应数据变更的标准实践。
