React Query重新获取数据后映射数据未显示问题求助

使用React Query从接口获取数据，对返回结果做额外数据映射后在表格展示。切换下拉框的Context值时会触发重新获取数据，但重取后表格只显示原始数据，之前添加的映射值没展示。初始加载时映射数据能正常显示。

代码示例：

const contextValue = useContext(IdContext);
const id = useRef(contextValue.id);

const { data,
        error,
        isError,
        isLoading,
        refetch,
        isFetching,
        isFetched } = useGetData(axios, contextValue.id);

useEffect(() => {
        data.map(d => {
            d.value = getValue(d.id).toString();
            return true;
        });
    }, [data, isFetched]);

useEffect(() => {
        if (id.current !== contextValue.id) {
            refetch();
        }

        return () => { id.current = contextValue.id }
    }, [contextValue]);

return (
        <>
            {!isLoading && isFetched && (....

核心问题分析 #

• React Query的data是不可变的缓存数据，直接修改data里的对象不会触发组件重渲染，而且缓存更新后会覆盖你修改过的数据。
• 手动调用refetch的逻辑完全多余：useGetData已经把contextValue.id作为依赖，ID变化时React Query会自动重新获取数据，不需要手动触发。

修复步骤 #

1. 用useMemo生成映射后的数据，不要直接修改原始data
   这样数据更新时会自动重新计算，且能触发组件渲染，表格渲染时直接用这个衍生数据：

   const mappedData = useMemo(() => {
     if (!data) return [];
     return data.map(d => ({
       ...d,
       value: getValue(d.id).toString()
     }));
   }, [data]);
   

2. 移除手动refetch的冗余逻辑
   删掉id这个useRef和对应的useEffect，让React Query自动管理数据刷新：

   // 删除以下代码
   // const id = useRef(contextValue.id);
   // 以及对应的useEffect
   

3. 优化渲染判断条件
   直接通过isLoading和mappedData判断，不用依赖isFetched：

   return (
     <>
       {isLoading ? (
         <div>加载中...</div>
       ) : (
         <Table data={mappedData} />
       )}
     </>
   );
   

修复原理 #

• useMemo会在data更新时同步生成最新的映射数据，保证表格拿到的始终是处理后的结果。
• 让React Query自动处理数据刷新，避免手动refetch带来的时序问题（比如重取后映射逻辑没及时触发）。

内容的提问来源于stack exchange，提问作者J.Cart