react-query：useQuery 返回 undefined 并且组件不会重新渲染

Posted 2023-02-19

【中文标题】react-query：useQuery 返回 undefined 并且组件不会重新渲染

【英文标题】：react-query: useQuery returns undefined and component does not rerender

【发布时间】：2021-12-01 13:43:56

【问题描述】：

我正在使用reactQuery 的一个小演示应用程序，您可以在this 回购中看到。应用调用this mock 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，并返回了数据。但是网格中的表格总是空的。

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

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

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

谁能建议 IO 哪里出了问题？

【问题讨论】：

对不起，我看错了代码。你能用axios-mock-adapter准备一个codeandbox吗？

是的，谢谢，我会尝试在一周内设置一些东西，并在完成后通知您。谢谢。

【参考方案1】：

像这样简单使用

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)

【讨论】：

请添加更多详细信息，说明为什么会这样。对于其他用户来说，仅代码的答案并不那么明显

【参考方案2】：

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

我从我的 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 调用的响应，而是从中获取数据对象并返回作为 Product[]

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

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

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

本地主机已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头...

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

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