React调用Google自定义搜索API时resultData.items未定义问题求解

数据老陈

2026-8-21

解决 resultData.items is undefined 报错

一、先处理初始值问题

组件刚加载时resultData是空对象，items字段不存在，直接调用map必然报错，这和你猜测的一致，几种实用解决方式：

用可选链操作符（最推荐）：在items后加?.，如果items不存在就直接跳过map，不会触发错误：
```
resultData.items?.map(item => (
  // 你的渲染逻辑代码
))
```

条件判断后渲染：先确认resultData.items存在再执行map：

{resultData.items && resultData.items.map(item => (
  // 你的渲染逻辑代码
))}

初始化时设置默认空数组：给useState的初始值加一个空的items数组，这样哪怕没拿到API数据，items也是存在的空数组，map不会报错：
```
const [resultData, setResultData] = useState({ items: [] });
```

二、其他可能导致报错的原因

除了初始值问题，还有几种情况会让items变成undefined：

API请求未返回items字段：比如搜索关键词无结果、API密钥错误或配额耗尽时，返回的响应里可能没有items，甚至是错误信息。这种情况要在请求回调里先校验数据结构：

fetch('你的Google自定义搜索API地址')
  .then(res => res.json())
  .then(data => {
    // 有items就存完整数据，没有就设空数组
    setResultData(data.items ? data : { items: [] });
  })
  .catch(err => {
    console.error('请求失败:', err);
    setResultData({ items: [] });
  });

状态更新传错数据结构：如果调用setResultData时传入的不是完整的API返回对象，比如只存了部分字段，没带上items，那resultData.items自然会未定义。要确保更新状态时传入的对象包含items（哪怕是空数组）。
异步请求时序问题：组件渲染时API请求还未完成，这本质是初始值问题，但如果请求完成后返回的数据确实没有items，还是会触发报错，所以必须在请求回调里做好数据校验。