如何将数据传输到另一个组件（useEffect 问题）

Question

In useEffect, I retrieve the data from the server and store it in the "products" array:

const { url } = props;
const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {
      setLoadingSpinner(true);
      const response = await fetch(url);
      const responseData = await response.json();
      setLoadingSpinner(false);
      const loadedProducts = [];

      for (const key in responseData) {
        loadedProducts.push({
          id: key,
          name: responseData[key].name,
          description: responseData[key].description,
          price: responseData[key].price,
          image: responseData[key].image,
          processor: responseData[key].processor,
        });
      }
      setProducts(loadedProducts);
      setIsDataLoaded(true);
    };
    fetchProducts();
  }, [url, isDataLoaded]);

I pass it to the ProductDetail component:

<ProductDetail products={products}></ProductDetail>

I always get a null value in the ProductDetail component:

function ProductDetail(props) {
    const params = useParams();
    const [product, setProduct] = useState(null);
    
    useEffect(() => {
      if (props.products && params.productId) {
        const product = props.products.find(product => product.id === params.productId);
        setProduct(product);
      }
    }, [props.products, params.productId]);

    console.log(product)

I realized that when useEffect is run for the first time, my "products" array is still empty and it sends it to the component, so it's not good. But I don't know how to fix this.

Answer 1

There are a couple of things wrong here. I'm going to start with something that seems tangential at first but it will lead to a better answer.

In ProductDetail you introduce a new state called product . You then, in a useEffect , find the product from the list & product id in props and set this back into the state item. This would be unnecessary state duplication (even if not copying a prop verbatim into state, a value derived directly from props still counts) and is going to increase the surface areas for bugs in your application (this is probably the most common beginner's error).

You actually don't need that state item, you just need useMemo :

function ProductDetail(props) {
    const params = useParams();
    
    const product = useMemo(() => {
      if (props.products && params.productId) {
        return props.products.find(product => product.id === params.productId);
      }
    }, [props.products, params.productId]);

    console.log(product)

To solve the issue with the product not being found briefly whilst then products load you can either (a) conditionally render the component so this code doesn't even run in the first place when products isn't fetched yet. Or (b) Change the ProductDetail so that it effectively does nothing until the product is found.

Solution A

const [products, setProducts] = useState(null); // We change the default to null to be able to distinguish empty list case from loading case.

// ...

{products !== null && <ProductDetail products={products}></ProductDetail>}

Solution B

function ProductDetail(props) {
    const params = useParams();
    
    const product = useMemo(() => {
      if (props.products && params.productId) {
        return props.products.find(product => product.id === params.productId);
      }
    }, [props.products, params.productId]);

    if (!product) return null // Return early (do nothing) whilst product is not found

    // ... your original render contents