javascript - 与 useEffect 反应的嵌套钩子

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 来映射每个产品的每个变体，并返回端点，然后获取该端点以返回端点的数据。

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

标签： javascriptreactjs

Answer 1

使用 props 创建新组件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>
};