使用React Query替代useState跨组件共享数据报错的解决方法

核心错误分析 #

1. 组件A中useQuery的误用：
   • useQuery的第二个参数必须是返回Promise的查询函数，不能直接传入字符串作为初始值。
   • 直接给varA赋值的方式完全错误，React Query的状态更新必须通过queryClient.setQueryData方法完成。
2. 组件B中查询Key不匹配：
   • 组件A中使用的查询Key是数组['objA']，但组件B调用getQueryData时传入了字符串'objA'，Key类型不匹配导致报错。

修正后的代码实现 #

组件A的正确写法

import { useQuery, useQueryClient } from '@tanstack/react-query';

function A() {
  const queryClient = useQueryClient();
  // 正确调用useQuery，第二个参数为返回Promise的查询函数，也可通过initialData指定初始值
  const { data: varA } = useQuery(['objA'], () => Promise.resolve(''), {
    initialData: ''
  });

  const handleDropDownSelect = (e) => {
    // 通过queryClient更新查询数据
    queryClient.setQueryData(['objA'], e.value);
  };

  return <select onChange={handleDropDownSelect}>{/* 下拉选项 */}</select>;
}

组件B的正确写法

有两种可靠的方式获取共享的varA：

方式1：使用getQueryData（需保证Key完全匹配）

import { useQueryClient } from '@tanstack/react-query';

function B() {
  const queryClient = useQueryClient();
  // 使用和组件A完全一致的数组Key
  const varA = queryClient.getQueryData(['objA']);

  return <div>{varA}</div>;
}

方式2：使用useQuery订阅数据变化（推荐，自动响应更新）

import { useQuery } from '@tanstack/react-query';

function B() {
  // 直接用useQuery订阅数据，数据更新时组件会自动重新渲染
  const { data: varA } = useQuery(['objA'], () => Promise.resolve(''), {
    initialData: ''
  });

  return <div>{varA}</div>;
}

关键注意事项 #

• React Query的查询Key必须完全一致（类型、内容都要匹配），数组Key和字符串Key会被视为不同的查询。
• 禁止直接修改useQuery返回的data，必须通过queryClient.setQueryData更新状态，否则会破坏React Query的状态管理机制。
• 如果仅用React Query做客户端状态管理（无异步请求），可以结合useQuery的initialData选项，或直接用queryClient的setQueryData/getQueryData组合实现。

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