React中如何渲染对象内嵌套数组并获取对应字段值？

报错原因说明 #

1. Cannot read properties of undefined ('reading items') 报错根因：
   React组件初始化渲染时，API请求还未完成，此时你存储响应数据的变量myObject是初始空值，myObject.artists为undefined，读取undefined的items属性自然报错。
2. Objects are not valid as a React child 报错根因：
   Object.keys(myObject)拿到的是myObject第一层的键名字符串数组['artists']，你把字符串当作艺术家对象读取属性必然失败，同时直接返回对象结构给React渲染也会触发该报错。

正确实现方式 #

你需要的目标数据都在myObject.artists.items数组中，遍历该数组即可拿到每个艺术家的id、name、images字段，配合可选链操作符做层级兜底即可规避初始化报错，示例代码如下：

// 遍历前用可选链?.逐层判断属性是否存在，任意一层不存在就不执行map，返回undefined
const displaySearchResult = myObject?.artists?.items?.map((artist) => (
  // 注意：React遍历列表的key必须绑定到返回的最外层元素上，不要放在内部的b标签
  <div key={artist.id} className="search-result-item">
    {/* 图片地址同样加可选链兜底，避免该艺术家无images数组/指定索引不存在的情况 */}
    <img src={artist.images?.[1]?.url || ''} alt="Artist"/>
    <b>{artist.name}</b>
    {/* 要存储id直接取artist.id即可，比如点击事件存值：onClick={() => 你的存储方法(artist.id)} */}
  </div>
)) || null; // 遍历未执行时返回null，不渲染冗余内容

如果你的项目环境不支持可选链语法，可以用&&逻辑符替代实现兜底：

const displaySearchResult = myObject && myObject.artists && myObject.artists.items && myObject.artists.items.map((artist) => (
  <div key={artist.id} className="search-result-item">
    <img src={artist.images && artist.images[1] && artist.images[1].url || ''} alt="Artist"/>
    <b>{artist.name}</b>
  </div>
)) || null;

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