React调用API后使用.map报错：.map is not a function问题排查

问题根源分析 #

1. API数据结构未正确解析：Postman返回的是包含data数组的对象，但如果直接将整个API响应赋值给Context中的products，会导致products是对象而非数组，对象没有map方法，触发报错。
2. 状态初始值类型错误：若Context中products的初始值不是数组（比如null或undefined），组件首次渲染时还未拿到API数据就调用map，同样会抛出类型错误。
3. 无效HTML结构：tbody标签内直接嵌套div不符合HTML规范，浏览器会自动调整DOM结构，可能引发渲染异常。

解决方案 #

1. 正确提取API响应中的数组数据 #

在Context的API请求逻辑中，提取响应里的data字段赋值给products：

// 示例：ProductContext中的请求代码
const fetchProducts = async () => {
  const response = await fetch('你的API接口地址');
  const apiData = await response.json();
  // 只取data对应的数组部分
  setProducts(apiData.data);
};

2. 初始化状态为数组类型 #

在Context中定义products状态时，初始值设为空数组，避免初始渲染时类型异常：

// ProductContext中的状态定义
const [products, setProducts] = useState([]);

3. 修复表格DOM结构 #

移除tbody内的div，直接渲染map生成的表格行，同时为每个tr添加唯一key（避免React警告）：

<tbody>
  {products.map((product) => (
    <tr key={product.productId}>
      <td>{product.productId}</td>
      <td>{String(product.isOfferable)}</td>
      <td>{product.productName}</td>
      <td>{product.productDescription}</td>
      <td>{String(product.isSold)}</td>
      <td>{product.categoryName}</td>
    </tr>
  ))}
</tbody>

4. 可选：添加类型安全校验 #

为了避免意外的类型问题，可以在渲染前判断products是否为数组，同时添加加载状态提示：

<tbody>
  {Array.isArray(products) ? (
    products.map((product) => (
      <tr key={product.productId}>
        {/* ...表格内容... */}
      </tr>
    ))
  ) : (
    <tr>
      <td colSpan="6">加载中...</td>
    </tr>
  )}
</tbody>

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