如何解决React中Uncaught TypeError: data.map is not a function错误

从你的控制台输出可以看到，API返回的是一个包含products数组的对象，而你直接将整个响应对象赋值给了data状态。由于data此时是一个对象而非数组，自然无法调用数组的map方法，导致报错。

修复方案 #

方案1：直接存储API返回的数组

修改getProduct函数，将响应中的products数组赋值给data：

async function getProduct() {
  var res = await axios.get("http://localhost:9900/products");
  console.log(res.data);
  // 取响应中的products数组
  setData(res.data.products);
}

这种方式下，你的初始状态useState([])是匹配的，后续判断data.length > 0也能正常工作。

方案2：保留完整响应对象（如果需要用到其他字段）

如果需要保留API返回的整个对象，需要调整初始状态和渲染逻辑：

1. 修改初始状态为对象：

const [data, setData] = useState({});

2. 渲染时先判断products数组是否存在，再调用map：

{data.products?.length > 0 && (
  data.products.map((product) => {
    // 你的渲染逻辑不变
  })
)}

这里使用可选链操作符?.避免初始状态下data.products为undefined导致的报错。

修正后的完整代码示例（方案1） #

import axios from 'axios';
import React, { useEffect, useState } from 'react'
import { NavLink } from 'react-router-dom';

const Products = () => {
  const [data, setData] = useState([]);

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

  async function getProduct() {
    var res = await axios.get("http://localhost:9900/products");
    console.log(res.data);
    // 改为存储products数组
    setData(res.data.products);
  }

  return (
    <>
      <div>
      {data.length > 0 && (
        data.map((product) => {
          return (
              <>
                  <div className="col-md-3 mb-4">
                      <div className="card h-100 text-center p-4 border-0 " key={product.productId} >
                          <NavLink to={`/products/${product.productId}`}><img src={product.productImage} className="card-img-top" alt={product.productTitle} height='250px' /></NavLink>
                          <div className="card-body">
                              <h5 className="card-title mb-0">{product.productTitle.substring(0, 12)}...</h5>
                              <h6 className="card-text text-center">Rating {product.productRating}</h6>
                              <p className="card-text lead fw-bold">${product.productPrice}</p>
                              <NavLink to={`/products/${product.productId}`} className="btn btn-outline-dark">Buy Now</NavLink>
                          </div>
                      </div>
                  </div>
              </>
          )
      })
      )}
    </div>
    </>
  )
}

export default Products

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