React Query 返回未定义的数据，而在网络选项卡中数据存在但不显示在页面上

Question

数据来自后端，我可以在网络选项卡中看到它，但是反应查询返回未定义的数据，它甚至没有对数据做出反应，因为它在控制台中返回错误的加载和获取，并且开发工具设置为新鲜(1) 。它之前可以工作，但现在似乎无法找到解决方案。

这是我的 App.js：

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      cacheTime: 0,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient} contextSharing={true}>
      <PrivateRoute
        exact
        path="/dashboard/snp/match"
        component={MatchedSequences}
      />
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  );
}

导出默认应用程序；

这是我的组件：

const queryClient = useQueryClient();
  const [showQuery, setShowQuery] = useState(false);
  const [showSequence, setShowSequence] = useState(false);

  const { isLoading, isFetching, error, data, status } = useQuery(
    "dn",
    () => {
      fetch("/api/users/find").then((res) => {
        return res.json();
      });
    },
    { keepPreviousData: false },
  );

  console.log({ isLoading, isFetching });
  console.log("error", error);
  console.log({ data });

我正在使用反应查询版本 3.34。

Answer 1

您的查询函数（ 的第二个参数useQuery）不返回任何内容：

    () => {
      fetch("/api/users/find").then((res) => {
        const result = res.json();
        console.log({result});
        return result;
      });
    },

如果对箭头函数使用大括号，则需要 return 关键字：

    () => {
      return fetch("/api/users/find").then((res) => {
        const result = res.json();
        console.log({result});
        return result;
      });
    },

或者，您可以使用箭头函数的隐式返回，但必须省略大括号：

    () => fetch("/api/users/find").then((res) => {
      const result = res.json();
      console.log({result});
      return result;
    });