React Native中React Query的useQuery返回undefined问题求助

核心错误原因 #

你违反了React Hooks的调用规则：Hooks只能在函数组件或自定义Hook的顶层调用，且自定义Hook必须以use开头。你的fetchedLocations是普通函数，直接调用它会导致useQuery无法在正确的Hook上下文执行，因此返回undefined。

修正步骤 #

1. 将数据获取逻辑改为自定义Hook，命名必须以use开头：

const useFetchedLocations = () => {
  return useQuery(["fetch-locations"], async () => {
    const response = await fetch("https://backend-upark.herokuapp.com/locations");
    return response.json();
  });
};

2. 在你的函数组件顶层调用这个自定义Hook：

const YourComponent = () => {
  const { data: locationss } = useFetchedLocations();
  console.log({ locationss });

  // 其他组件逻辑...
  return (/* 组件JSX结构 */);
};

补充说明 #

• 你的QueryClientProvider嵌套位置是正确的，只要调用useQuery的组件在QueryClientProvider内部即可，这部分无需修改。
• 自定义Hook的use前缀是React识别它的关键，只有遵循这个命名规则，React才会按Hook的规则处理其中的Hooks调用。

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