React调用Google Custom Search API部分数据undefined问题解决

问题原因 #

初始状态下resultData是空对象，未执行搜索时searchInformation属性不存在；即使搜索完成，若API返回异常，该属性也可能缺失。直接访问resultData.searchInformation.formattedTotalResults会因为上层属性不存在导致undefined，甚至引发渲染错误。

解决方案 #

1. 用可选链+空值合并运算符安全访问

和你处理items的逻辑一致，通过?.逐层安全访问嵌套属性，再用??设置默认显示内容，避免undefined直接展示：

<p>{resultData.searchInformation?.formattedTotalResults ?? '请输入关键词进行搜索'}</p>

• ?.：如果searchInformation不存在，直接返回undefined，不会继续访问formattedTotalResults
• ??：当左侧值为undefined或null时，显示右侧的默认文本

2. 优化结果列表的判断逻辑

你当前判断items的代码存在逻辑错误：Object.keys(resultData.items)返回数组，和0比较永远为true（数组和数字类型不匹配）。应该改用length判断：

{resultData.items?.length > 0 ? (
  <>
    {items}
  </>
) : (
  <>
    <p>No results</p>
  </>
)}

这里同样用?.确保items不存在时不会报错。

3. 结合loading状态优化用户体验

可以在loading状态下隐藏结果统计和列表，显示加载提示：

<div>
  {loading ? (
    <p>加载中...</p>
  ) : (
    <>
      <p>{resultData.searchInformation?.formattedTotalResults ?? '请输入关键词进行搜索'}</p>
      {resultData.items?.length > 0 ? (
        <>
          {items}
        </>
      ) : (
        <>
          <p>No results</p>
        </>
      )}
    </>
  )}
</div>

修改后的完整return示例 #

return (
  <div>
    <input className='searchInput' onChange={handleInputChange}></input>
    <button className='btn' onClick={searchInGoogle}>Submit</button>
    {/* <Searchbar /> */}
    <div>
      {loading ? (
        <p>加载中...</p>
      ) : (
        <>
          <p>{resultData.searchInformation?.formattedTotalResults ?? '请输入关键词进行搜索'}</p>
          {resultData.items?.length > 0 ? (
            <>
              {items}
            </>
          ) : (
            <>
              <p>No results</p>
            </>
          )}
        </>
      )}
    </div>
  </div>
)

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