javascript - 如何在 forEach 中运行 useQuery？

Question

我有循环 - forEach - 它为数组的每个元素找到 productId。我想使用 apollo 查询通过 productId 获取我的数据库。
怎么做？

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

);

Answer 1

来自 the rules of hooks :

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders.

钩子(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
}