React useQuery基于queryKey重取时未返回data问题排查

我正在开发一个CSV上传器，需求是当validIds字符串数组状态变更时，通过useQuery获取数据。流程是：接收ID列表并格式化为formattedIds，将其设置到validIds状态后触发useQuery，传入这些ID获取有效ID，成功后把有效ID保存到状态，同时生成无效ID列表返回给用户。

但现在遇到两个问题：

1. 调用setValidIds(formattedIds)后，网络请求已经完成，但isSuccess条件不成立，无法处理返回数据；
2. 同一会话再次上传CSV时，能进入if(isSuccess)语句，但使用的是上次上传的ID。

相关代码：

const [validIds, setValidIds] = useState<string[]>([]);

const { data: people, isSuccess } = useQuery({
  queryKey: ["People", validIds],
  queryFn: () => getPeople(validIds),
  enabled: validIds.length > 0,
});

const addFormattedIds = (ids: string[]) => {
  setValidIds([]);
  const invalidIds: string[] = [];
  
  //Prior validation in order to get formattedIds, a list of strings
    setValidIds(formattedIds);
    if (isSuccess) {
      const returnedIds = people?.data.map((person) => person.id);
      const differences = formattedIds.filter((id) => !returnedIds.includes(id));
      invalidIds.concat(differences);
      setValidIds(returnedIds);
    }

    if (validIds.length < ids.length) {
      console.log(invalidIds);
    }
    setIdsEnteredAsCsv(validIds);
};

核心问题分析 #

1. 状态更新异步性：setValidIds是异步操作，调用后validIds不会立即更新，addFormattedIds函数里的isSuccess和people还是当前渲染周期的旧值，第一次调用时拿不到最新查询状态。
2. Query状态的快照特性：useQuery的isSuccess和data是组件渲染时的状态快照，不能在同步事件处理函数里直接判断——查询完成后组件会重新渲染，但同步函数里的状态不会实时更新。

解决方案 #

方案1：用useQuery的onSuccess回调处理结果

把处理有效ID、生成无效ID的逻辑放到useQuery的onSuccess回调中，查询成功后自动触发，且能拿到最新返回数据：

const [validIds, setValidIds] = useState<string[]>([]);
const [invalidIds, setInvalidIds] = useState<string[]>([]);
const [currentFormattedIds, setCurrentFormattedIds] = useState<string[]>([]);

const { data: people } = useQuery({
  queryKey: ["People", validIds],
  queryFn: () => getPeople(validIds),
  enabled: validIds.length > 0,
  onSuccess: (response) => {
    const returnedIds = response.data.map((person) => person.id);
    // 用缓存的格式化ID对比生成无效ID
    const differences = currentFormattedIds.filter(id => !returnedIds.includes(id));
    setInvalidIds(differences);
    setValidIds(returnedIds);
    setIdsEnteredAsCsv(returnedIds);
  },
});

const addFormattedIds = (ids: string[]) => {
  // 替换为你的实际格式化逻辑
  const formattedIds = ids.map(id => id.trim().toUpperCase());
  
  setCurrentFormattedIds(formattedIds); // 缓存当前要验证的ID列表
  setValidIds(formattedIds); // 触发useQuery
  setInvalidIds([]); // 清空历史无效ID
};

方案2：用useEffect监听查询状态

如果需要在组件渲染层面处理结果，可通过useEffect监听isSuccess和people的变化：

const [validIds, setValidIds] = useState<string[]>([]);
const [invalidIds, setInvalidIds] = useState<string[]>([]);
const [currentFormattedIds, setCurrentFormattedIds] = useState<string[]>([]);

const { data: people, isSuccess } = useQuery({
  queryKey: ["People", validIds],
  queryFn: () => getPeople(validIds),
  enabled: validIds.length > 0,
});

// 监听查询成功事件
useEffect(() => {
  if (isSuccess && people && currentFormattedIds.length > 0) {
    const returnedIds = people.data.map((person) => person.id);
    const differences = currentFormattedIds.filter(id => !returnedIds.includes(id));
    setInvalidIds(differences);
    setValidIds(returnedIds);
    setIdsEnteredAsCsv(returnedIds);
  }
}, [isSuccess, people, currentFormattedIds]);

const addFormattedIds = (ids: string[]) => {
  const formattedIds = ids.map(id => id.trim()); // 替换为你的实际格式化逻辑
  
  setCurrentFormattedIds(formattedIds);
  setValidIds(formattedIds);
  setInvalidIds([]);
};

额外注意点 #

• 不要在同步函数里直接依赖useQuery的状态（如isSuccess），这些状态是组件渲染快照，不会在事件函数内实时更新。
• invalidIds.concat(differences)不会修改原数组，因为concat返回新数组，必须用setInvalidIds来更新状态。
• 确保getPeople函数正确接收validIds参数，返回数据结构符合预期（如包含data字段的人员列表）。

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