连续执行两个React Query时出现project为null的TypeError问题求助

错误原因 #

1. 错误访问状态变量：你把project当成React Ref使用project.value，但它是useState声明的状态变量，当project为null时，访问null.value会直接抛出TypeError: project is null。
2. React Query配置错误：useQuery不存在dependencies配置项，这个参数完全无效。
3. 状态更新时机与闭包问题：onSuccess中直接使用外部的projectMapping可能捕获旧值，同时enabled条件仅依赖isFetching和project，可能在projectMapping查询未完全完成时就尝试启用getStaffing。

修正后的代码 #

const Staffing = () => {
  const { tokenApi } = useContext(LoginContext);
  const [project, setProject] = useState(null);

  const {
    data: projectMapping,
    isLoading: projectMappingIsLoading,
    isFetching: projectMappingIsFetching,
  } = useQuery("ProjectMapping", () => getProjectMapping(tokenApi), {
    onSuccess: (data) => {
      // 直接用回调返回的data，避免闭包捕获旧值
      if (data != null && data.length !== 0) {
        setProject(data[0]);
      }
    },
  });

  const { data: staffingData, isLoading: staffingIsLoading } = useQuery(
    // 把project加入queryKey，状态变化时自动触发重新查询
    [project, "Staffing"],
    () => getStaffing(project, tokenApi),
    {
      // 确保projectMapping查询完成且project已赋值后才启用
      enabled: !projectMappingIsLoading && !projectMappingIsFetching && project != null,
    }
  );

  // 组件剩余逻辑...
}

关键修正点 #

• 移除project.value：直接使用project即可，useState的状态变量不需要.value访问。
• 优化onSuccess回调：使用回调参数data而非外部的projectMapping，避免闭包导致的旧值问题。
• 删除无效的dependencies配置：React Query通过queryKey管理查询依赖，当queryKey中的project变化时，会自动重新执行查询。
• 完善enabled条件：同时检查projectMappingIsLoading和projectMappingIsFetching，确保getProjectMapping查询完全结束、project已赋值后，才发起getStaffing请求。

额外建议 #

如果project是对象类型，建议在queryKey中使用其唯一标识（如project.id），避免因对象引用变化触发不必要的重复查询：

queryKey: [project?.id, "Staffing"]

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