Question

我有一个组件，可以返回指定类别的所有产品，并返回每个产品的数据。我得到的所有产品都使用：

  const [products, setProducts] = useState([]);
  // Get all of the available products from category
  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 (
                <p>{item.href}</p>
              )
            })}
          </div>
        </>
      );
    }
  )}
</>

每种产品也有10种变化。因此，在每个产品中，我都必须从每个变体的api端点-即href中获取数据。

因此，最终，我认为我需要创建第二个useEffect，以映射每个产品的每个变体，并返回端点，然后获取该端点以返回端点的数据。

关于如何开始此操作，我完全处于停滞状态。任何帮助将不胜感激。

Answer 1

使用道具variation创建新组件。该组件会产生变化并发出请求。

const Variation = ({ variation }) => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch(variation)
      .then(res => res.json())
      .then(setData)
      .catch(console.error);
  }, [variation]);

  return <p>{variation}</p>
};

嵌套的钩子会与useEffect

1 个答案: