来自 api 的数据未反映何时将数据传递给 setState

Question

我向 api 发出了请求，当我控制台记录数据时，它显示了 data ，但 setItemsList(data) 设置为空。

在组件中未收到 itemsList 值。

我搜索了这个，发现的问题是“你向API发出了一个异步请求，请求（例如Promise）尚未解决，但你卸载了组件。然后请求解决了，this.setState()是调用以设置新状态，但它遇到了未安装的组件。”但我无法解决这个问题

    import { useEffect, useState } from "react";

export const useProductsList = () => {
  const [itemsList, setItemsList] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      await fetch("http://localhost:4000/items")
        .then((resp) => resp.json())
        .then((data) => {
          setItemsList(data);
          console.log("il", itemsList);
        })
        .catch((err) => console.log("Err occured", err));
    };
    fetchData();
  }, []);

  return {
    itemsList,
    setItemsList,
  };
};

import React, { useEffect, useMemo, useRef, useState } from "react";
import { useParams } from "react-router-dom";
import { useItemsList } from "./hooks/useItemsList";

// import ImageDisplay from "../components/item/ImageDisplay";

const Item = () => {
  const { itemsList } = useItemsList();
  const { id } = useParams();
  const [product, setProduct] = useState([]);
  console.log(itemsList);

  useEffect(() => {
    setProduct(() =>
      itemsList?.filter((prod) => parseInt(prod.id) === parseInt(id))
    );
    console.log("PRODUCT", product);
  }, []);

  return (
    <div style={{ display: "grid" }}>
      <div>{/* <ImageDisplay product={productArr[0]} /> */}</div>
      <div>
        <p>{product[0].title}</p>
         <p>{product[0].description}</p>
        <p>{product[0].rating} / 5</p>
        <hr></hr>
        <p>{product[0].price}</p>
        <p>{product[0].discount}</p> 
      </div>
    </div>
  );
};

export default Item;

Answer 1

尝试添加此代码来测试

itemLists

是否正在获取任何数据，这会让您知道在设置数据之前是否返回

itemLists

。

  useEffect(() => {
    //Will console log when itemsList is updated
    console.log("Updated itemsList:", itemsList);
  }, [itemsList]);