ReactJS 从 API 获取数据

Question

大家好，我不知道如何从 API 获取数据。
更具体地说，我有一个这样的API：

{
  "data": {
    "free_courses": [
      {
        "id": 7,
        "title": "Kiến Thức Nhập Môn IT",
        "slug": "lessons-for-newbie",
        "description": "Để có cái nhìn tổng quan về ngành IT - Lập trình web các bạn nên xem các videos tại khóa này trước nhé.",
        "image": "courses/7.png",
      },
    ]
  }
}

在reactjs中，我有这样的东西：

函数联系人(){ const [产品，setProducts] = useState({});

useEffect(() => {
  const getProducts = async () => {
    try {
      const url = "https://api-gateway.fullstack.edu.vn/api/combined-courses";
      const response = await fetch(url);
      const responseJSON = await response.json();
      setProducts(responseJSON);
      //console.log("ResponseJSON:", responseJSON);
    } catch (error) {
      console.log("Failed to fetch products: ", error);
    }
  };
  getProducts();
}, []);
return (
  <>
    {
      <div className="contact-container">
        {products.map((product) => (
          <ul key={product._id}>
            <h1>{product.title}</h1>
            <h2>{product.description}</h2>
          </ul>
        ))}
      </div>
    }
  </>
);

}

当我刷新页面时，出现如下错误：未捕获的类型错误：products.map 不是函数
我可以得到 //console.log("ResponseJSON:", responseJSON);并从 console.log 查看我的数据，但是当我在网站上呈现它时，它宣布了一个错误。因此，任何人都可以帮助我解决我的问题。
谢谢大家的回答。

Answer 1

将您的状态设为数组：

const [products, setProducts] = useState([])

此外，您对提取的响应应该是一个数组... 或者，你必须以数组的形式保存，这样 map 函数才能正常工作。

只需在呈现列表元素之前添加一个检查即可。

<div className="contact-container">
        {products?.length&&products.map((product) => (
          <ul key={product._id}>
            <h1>{product.title}</h1>
            <h2>{product.description}</h2>
          </ul>
        ))}
      </div>

这一定能解决您的问题。

Answer 2

你应该在产品后面加一个问号，它会检查产品是否有数组然后通过它们映射 {products?.map((product) =>

ReactJS 从 API 获取数据

ReactJS taking data from API

reactjs

fetch-api