React调用API时出现data.map is not a function错误求助

错误原因 #

你调用的API https://fakestoreapi.com/products/1 返回的是单个商品对象，而map()是数组的专属方法，不能在对象上调用，因此触发该错误。

解决方案 #

根据你的需求，有两种处理方式：

方式一：渲染单个商品对象

如果你的目标是获取并渲染单个商品，直接访问对象属性即可，无需使用map()：

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  // 初始化为null，避免初始渲染时的undefined问题
  const [data, setData] = useState(null);

  const apiCall = () => {
    fetch("https://fakestoreapi.com/products/1")
      .then((res) => res.json())
      .then((json) => {
        setData(json);
      });
  };

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

  return (
    <div className="App">
      {data ? (
        <div>
          <h2>商品ID：{data.id}</h2>
          <h3>商品名称：{data.title}</h3>
          <p>价格：${data.price}</p>
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

方式二：获取并渲染商品数组

如果需要获取多个商品，修改API地址为不带ID的版本（返回数组），即可正常使用map()：

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  // 初始化为空数组，匹配API返回的类型
  const [data, setData] = useState([]);

  const apiCall = () => {
    // 请求所有商品，返回数组格式
    fetch("https://fakestoreapi.com/products")
      .then((res) => res.json())
      .then((json) => {
        setData(json);
      });
  };

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

  return (
    <div className="App">
      {data.length > 0 ? (
        data.map((val) => (
          // 必须添加key属性，避免React警告
          <div key={val.id}>
            <h2>商品ID：{val.id}</h2>
            <h3>商品名称：{val.title}</h3>
          </div>
        ))
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

额外注意事项 #

• 初始化useState时，尽量匹配API返回的数据类型（对象设为null，数组设为[]），避免不必要的类型判断问题。
• 使用map()渲染列表时，必须给每个子元素添加唯一的key属性。
• 替换空字符串为加载提示，提升用户体验。

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