React中useEffect请求API报错：Cannot read properties of undefined (reading 'map')

核心问题 #

你遇到的报错是因为组件首次渲染时，icons的初始值是数组[]，但你试图访问它的children属性——数组本身没有children属性，所以icons.children是undefined，调用map自然会报错。

而当你直接把数据赋值给变量时，是直接使用了API返回的完整对象（带有children属性），跳过了React组件初始渲染的状态初始化阶段，所以不会触发错误。控制台显示的数据是API请求完成后更新的icons状态，但这时候首次渲染的报错已经发生了。

修复方案 #

方案1：修正初始状态类型

把icons的初始状态从数组改成匹配API返回结构的对象，确保children初始时是数组：

const [icons, setIcons] = useState({ children: [] });

方案2：添加可选链判断（推荐）

在访问children和调用map前添加可选链操作符，避免undefined报错：

{icons.children?.map(icon => {
  // ... 你的渲染逻辑
})}

方案3：增加加载状态（优化体验）

可以额外加一个加载状态，在数据未返回时显示加载提示，避免页面空白或错误：

const [icons, setIcons] = useState({});
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetch("你的API地址")
    .then(response => response.json())
    .then(data => {
      setIcons(data);
      setLoading(false);
    })
    .catch(err => {
      console.log(err.message);
      setLoading(false);
    });
}, []);

if (loading) {
  return <div>加载中...</div>;
}

return (
  <div>
    <h2>Icons</h2>
    {icons.children?.map(icon => {
      // ... 你的渲染逻辑
    })}
  </div>
);

额外说明 #

控制台打印的icons会出现多次：第一次是初始状态（数组或空对象），第二次是API请求完成后的更新状态。你看到的"数据已存在"是第二次的打印结果，但首次渲染的报错已经触发了，所以要确保初始状态的结构和API返回数据结构一致，或者在渲染时做空值判断。

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