Question

我有一个循环-forEach-为数组的每个元素查找productId。我想使用阿波罗查询按productId提取数据库。怎么做？

products.forEach(({ productId, quantity }) =>
    // fetch by 'productId'

);

Answer 1

来自the rules of hooks：

不要在循环，条件或嵌套函数中调用挂钩。相反，请始终在React函数的顶层使用挂钩。通过遵循此规则，可以确保每次渲染组件时都以相同的顺序调用Hook。

不能在循环内使用钩子，因此不能在forEach回调中使用钩子。

您应该为每个只使用一次useQuery挂钩的产品创建一个单独的组件。然后，您可以map浏览产品并为每个产品返回组件：

const YourComponent = () => {
  ...
  return products.map(({ productId, quantity }) => (
    <Product key={productId} productId={productId} quantity={quantity} />
  ))
}

const Product = () => {
  const { data, error, loading } = useQuery(...)
  // render your data accordingly
}

Answer 2

通过将refetchOnWindowFocus和enable属性设置为false然后调用方法refetch，基于逻辑或手动多次运行useQuery ()。示例如下。

const RefetchExample = () => {

const manualFetch = {
  refetchOnWindowFocus: false,
  enabled: false
}

const GetAssetImage = async () => {
  const {data} = await axiosInstance.get("Your API")
  return data
}

const {assetImage, refetch} = useQuery('assetImage', GetAssetImage, manualFetch)

const imageFetch = () => {
    refetch();
}
return (
   <Button onClick={imageFetch}>Refetch</Button>
)
}

export default RefetchExample

如何在forEach中运行useQuery？

2 个答案: