嵌套钩子与 useEffect 反应

Question

I have a component where I return all products from a specified category and return the data for each product. I get all products using:

  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);
      });
  }, []);

And display like:

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

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

Each product also has 10 variations, though. So within each product, I have to then fetch the data from each variation's api endpoint - which is the href.

So ultimately, I am thinking that I need to create a second useEffect that will map through each variation of each product, and return the endpoint, THEN fetch that endpoint to return the endpoint's data.

I am completely at a standstill as to how to start this. Any help would be appreciated.

Answer 1

Create new component with props variation . This component gets variation and makes request.

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>
};