与 useEffect 反应的嵌套钩子答案

【问题标题】：Nested hooks in react with useEffect与 useEffect 反应的嵌套钩子
【发布时间】：2020-10-01 18:10:23
【问题描述】：

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

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

我完全不知道如何开始。任何帮助将不胜感激。

【问题讨论】：

<ItemDetails> 是做什么的？似乎需要将其中的 JSX 表达式移到组件定义中，并接受 product 作为道具。
@PatrickRoberts 不相关，所以我删除了它
无论如何，似乎 products.map() 回调中的 JSX 表达式将成为移动到新组件的好候选，因为它执行需要处理的另一层获取有状态地。

标签： javascript reactjs

【解决方案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>
};

【讨论】：