React Query return undefined data while in network tab data exists but it does not show on the page

Question

数据来自后端，我可以在网络选项卡中看到它，但是反应查询返回未定义的数据，它甚至没有对数据做出反应，因为它 returns 错误加载和获取控制台，devtools 设置为 fresh(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 });

我使用的是 React Query 3.34 版。

Answer 1

请更新您的代码以在提取中添加日志记录，如下所示：

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) => {
        const result = res.json();
        console.log({result});
        return result;
      });
    },
    { keepPreviousData: false },
  );

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

result有什么价值？

Answer 2

您的查询函数（useQuery 的第二个参数）没有 return 任何东西：

    () => {
      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;
      });
    },

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

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

React Query return undefined data while in network tab data exists but it does not show on the page

React Query return undefined data while in network tab the data exists but it does not show on the page

javascript

reactjs

react-query