react-query: useQuery returns 未定义且组件不重新呈现

Question

我正在玩一个小演示应用 reactQuery，您可以在 this repo. The app calls this 模拟 API.

中看到

我遇到了一个问题，我正在使用 useQuery 挂钩在产品中调用此函数 API file:

export const getAllProducts = async (): Promise<Product[]> => {
  const productEndPoint = 'http://localhost:5000/api/product';
  const { data } = await axios.get(productEndPoint);
  return data as Array<Product>;
};

在我的 ProductTable 组件中，我使用以下方式调用此函数：

const { data } = useQuery('products', getAllProducts);

我发现确实调用了 API，并且返回了数据。但网格中的 table 始终为空。

如果我进行调试，我会看到 useQuery 返回的数据对象未定义。

Web 请求成功完成，我可以在浏览器请求下的网络选项卡中看到返回的数据。

我怀疑它可能是 getAllProducts 的结构方式或异步等待问题，但无法完全弄清楚。

谁能指出 IO 哪里出了问题？

Answer 1

我已经设法让它工作了。为了他人的利益，我分享我的经验教训：

我从 api 函数开始做了一些小改动。将函数更改为以下内容：

export const getAllProducts = async (): Promise<Product[]> => {
   const response = await axios.get(`api/product`, {
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
 });

  return response.data as Product[];
};

我没有解构 axios 调用的响应，而是从中获取数据对象，return 作为 Product[]

然后我更改的第二件事是在我的 ProductTable 组件中。在这里，我通过将调用更改为 :

来告诉 useQuery 预期的响应类型

const { data } = useQuery<Product[], Error>('products', getAllProducts);

最后，我犯了一个新手错误：因为我在本地主机上的 docker 容器运行中使用了模拟 api 并使用 http://localhost 调用它： 5000/api/product 我遇到了众所周知的网络错误：

localhost has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...

为了解决这个问题，我只是在 packages.json 文件中添加了一个属性："proxy":"http://localhost:5000",

这现在已经成功地允许获取数据，正如我所期望的那样。

Answer 2

就这么用起初数据是未定义的，所以映射未定义的数据会给你一个错误，所以我们必须使用 isLoading，如果 isLoading 是真的，我们不会渲染或映射数据，直到 isLoading 变为假，然后我们可以渲染或 return 数据。

export const getAllProducts = async (): Promise<Product[]> => {
  const productEndPoint = 'http://localhost:5000/api/product';
  const res= await axios.get(productEndPoint);
  return res.data as Array<Product>;
};

const { data:products , isLoading } = useQuery('products', getAllProducts);

if(isLoading){
return <FallBackView />
}

return (){
products.map(item => item)
}

react-query: useQuery returns 未定义且组件不重新呈现

react-query: useQuery returns undefined and component does not rerender

typescript

reactjs

axios

react-query