React嵌套调用map方法渲染列表出现undefined相关报错如何解决

问题根因 #

报错的核心原因是代码执行map/Array.from的时刻，至少有一个workItem的bullets字段值为undefined：

• 控制台能打印出数组是浏览器console.log的懒加载特性导致：打印时记录的是变量引用，你点击展开查看时才会读取变量的当前值，此时异步请求的简历数据已经赋值完成，所以看到的是数组，但代码调用遍历方法的时机早于数据返回，此时bullets还未赋值为数组。
• 也有可能是修改resumeData.json时，有部分work条目遗漏了bullets字段，导致对应workItem.bullets为undefined。

解决方案 #

不需要额外用Array.from转换，只要给bullets设置兜底的空数组默认值即可，可选两种写法：

写法1：可选链+空值合并（推荐） #

利用ES2020的可选链运算符做安全访问，搭配空值合并运算符兜底空数组：

const work = this.props.data.work.map( workItem => {
  return (
    <div key={workItem.company}>
      <h3>{workItem.company}</h3>
      <p className="info">
        {workItem.title}
        <span>&bull;</span> <em className="date">{workItem.years}</em>
      </p>
      <p>{workItem.description}</p>
      <ul>
        {
          (workItem.bullets ?? []).map((bulletItem, i) => <li key={i}>{bulletItem}</li>)
        }
      </ul>
    </div>
  );
});

写法2：逻辑或兜底 #

如果项目不支持新语法，用逻辑或运算符兜底空数组即可：

(workItem.bullets || []).map((bulletItem, i) => <li key={i}>{bulletItem}</li>)

调整后如果仍有问题，可以遍历work数组时统一检查每个条目的bullets字段是否存在，避免JSON配置遗漏。

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