Блог

У меня есть компонент, в котором я отображаю информацию о продуктах. У меня есть мой первый вызов api как:

   const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch(state.source.api   "/cocart/v1/products?category="   category.name)
      .then((response) => response.json())
      .then((data) => {
        setProducts(data);
      });
  }, []);
  

Который отображается следующим образом:

 <>
  {products.map(
    ({ id, name, price, categories, _links }) => {
      return (
        <>
          <p>{name}</p>

          <div>
            {_links.variations.map((item) => {
              return (
                <>
                  <Variation itemname={name} href={item.href} />
                </>
              )
            })}
          </div>
        </>
      );
    }
  )}
</>
  

И результатом console.log(products) является:

я отображаю информацию о каждом продукте в div, где главное, что мне нужно правильно отобразить, — это цены. Из-за того факта, что каждый продукт имеет разные размеры, которые являются разницей цен, мне нужно показать диапазон (т. Е. От 100 до 200 долларов), чтобы представить, что каждый продукт может варьироваться от 100 до 200 долларов. Для этого мне нужно получить api для каждого варианта продукта. URL-адрес каждого варианта продукта указан в данных продукта. Итак, для каждого продукта я затем перебираю каждый из его вариантов, извлекаю URL вариантов и возвращаю данные для каждого варианта.. это то, что содержит цену варианта. я делаю это с помощью:

 const Variation = ({ href, itemname }) => {
  const [varData, setVarData] = useState([]);
  useEffect(() => {
    fetch(href)
      .then((response) => response.json())
      .then((data) => {
        setVarData(data);
      });
  }, []);

  return (
    <>
      {console.log(varData)}
      <p>{varData.price}</p>
    </>
  )
}
  

Результатом console.log(varData) является:

Моя проблема в том, что мне нужен каждый ответ varData для продукта, который будет возвращен в массив. это немного сложно, поэтому, если мне нужно предоставить больше кода, дайте мне знать. Любая помощь была бы отличной.