React.js中products.map()不是函数问题求助

问题原因 #

你直接把API返回的整个响应对象赋值给了products，但dummyjson的/products接口返回的数据结构是包含products数组的对象（格式类似{ products: [...], total: ... }）。对象无法调用map方法，因此触发报错。

修复代码 #

修改fetchData函数，提取响应对象里的products数组赋值给状态：

const fetchData = async () => {
    const response = await fetch("https://dummyjson.com/products");
    const data = await response.json();
    // 取data嵌套的products数组，而非整个data对象
    return setProducts(data.products);
  }

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

  console.log(products)

  return (
    <div>
    <ul>
    {/* 加空数组兜底，避免首次渲染时products为undefined报错 */}
    {(products || []).map((product) => {
        return (
          <li key={product.id}> {/* 用product.id作为key，比index更符合React规范 */}
            <h2>{product.title}</h2>
          </li>
        );
      })}
    </ul>
    </div>
  )

额外优化建议 #

• 初始化products状态时设为空数组（比如const [products, setProducts] = useState([])），彻底避免首次渲染的潜在报错。
• 始终用数据自身的唯一标识（如product.id）作为列表项的key，而非索引，能提升列表渲染的稳定性与性能。

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