如何确保React子组件Props刷新？RTK Query表格更新异常

使用React/Redux技术栈，父组件Results通过RTK Query获取数据，执行删除操作触发刷新后，父组件已获取到更新后的数据并通过Props传给子组件TableResults，但表格始终未更新，已删除的数据仍显示在表格中。

问题根源 #

子组件TableResults中，useMemo缓存data时依赖项数组为空，导致组件不会响应props.data的变化，始终使用初始数据：

const data = React.useMemo(
    () => props.data,
    [] // 未添加props.data作为依赖，数据更新时不会重新计算
)

useTable基于这个缓存的旧数据初始化，因此表格不会同步最新数据。

解决方案 #

1. 修复useMemo的依赖项 #

将props.data加入useMemo的依赖数组，确保数据更新时重新生成缓存：

const data = React.useMemo(
    () => props.data,
    [props.data] // 添加依赖项，响应props.data的变化
)

2. 确保useTable响应数据更新 #

useTable会根据传入的data引用变化重新初始化表格逻辑。修复useMemo后，data会在props.data更新时生成新的引用，useTable会自动重新计算表格数据，实现刷新。

可选优化：确保数据引用变化 #

如果后端返回的数组引用未发生变化（比如某些情况下数据更新但引用不变），可以在子组件中返回新数组确保引用更新：

const data = React.useMemo(
    () => [...props.data], // 浅拷贝生成新数组
    [props.data]
)

或者在父组件传递数据时做浅拷贝：

<TableResults data={[...data]} sizePerPageList={sizePerPageList} />

验证RTK Query配置 #

确认useGetItemsQuery配置了与mutation匹配的标签，确保删除操作触发后查询自动刷新：

// useGetItemsQuery需要配置providesTags
const { data, error, isError, isLoading, isFetching } = useGetItemsQuery(undefined, {
    providesTags: ['Items']
})

你的deleteItems mutation已配置invalidatesTags: ['Items']，这部分是正确的，能触发父组件查询重新获取数据。

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