Как запустить useQuery внутри forEach? - PullRequest
Новая
       12

Как запустить useQuery внутри forEach?

0 голосов
/ 24 марта 2020

У меня есть l oop - forEach - который находит productId для каждого элемента массива. Я хочу получить свою базу данных по productId, используя запрос apollo. Как это сделать? 

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

);

1 Ответ

0 голосов
/ 24 марта 2020

Из правила хуков :

Не вызывать хуки внутри циклов, условий или вложенных функций. Вместо этого всегда используйте хуки в верхний уровень вашей функции React. Следуя этому правилу, вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента.

Хуки не могут использоваться внутри al oop, поэтому вы не можете использовать их внутри forEach callback.

Вы должны создать отдельный компонент для каждого продукта, который использует хук 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
}
...