React前端数据不显示：API取数更新State后渲染失效

核心原因 #

你在products.map()的回调函数里没有返回要渲染的JSX元素。当箭头函数使用大括号{}包裹代码块时，必须显式用return语句返回内容；否则函数默认返回undefined，React不会渲染undefined值，所以前端看不到内容。

两种修复方式 #

1. 隐式返回（适用于单条语句）：去掉大括号，直接写JSX

{products?.map((item) => (
  <p key={item.id}>{item.title}</p>
))}

注：这里加上了key属性，这是React列表渲染的强制要求，能避免控制台警告

2. 显式添加return（适用于多行代码）：保留大括号，在JSX前加上return

{products?.map((item) => {
  console.log(item.title);
  return <p key={item.id}>{item.title}</p>;
})}

完整修正后的代码 #

import { useEffect, useState } from "react";

const ProductsPage = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetchProducts();
  }, []);

  const fetchProducts = () => {
    fetch("https://fakestoreapi.com/products?limit=5")
      .then((res) => res.json())
      .then((json) => {
        console.log(json);
        setProducts(json);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  
  return (
    <div className="products-page">
      {products?.map((item) => {
        console.log(item.title);
        return <p key={item.id}>{item.title}</p>;
      })}
    </div>
  );
};

export default ProductsPage; 

内容的提问来源于stack exchange，提问作者Gaganpreet Singh