React访问opps.postedBy.name时报TypeError:无法读取undefined的name属性

报错原因 #

即使你确认接口返回的opps.postedBy是对象，也会出现该报错的核心原因是：React 初始渲染时，你的opp数组大概率还未完成接口异步请求、没有拿到完整数据，初始状态下的opps.postedBy为undefined，访问name属性就会抛出错误；也有可能是部分opps项缺失postedBy字段。

解决方案 #

方法1：使用可选链操作符（推荐，ES2020+ 支持） #

直接在可能为空的属性后加?.，当属性为undefined/null时会直接终止取值、不会抛出错误，写法最简洁：

<p><b>Author : {opps.postedBy?.name}</b></p>

方法2：使用短路求值兼容旧版本 #

如果你的项目不支持ES2020新特性，可以用&&逻辑运算符做前置校验，只有postedBy存在时才会读取name属性：

<p><b>Author : {opps.postedBy && opps.postedBy.name}</b></p>

方法3：追加默认值优化显示 #

可以配合空值合并运算符??添加兜底显示内容，避免字段为空时页面留白：

<p><b>Author : {opps.postedBy?.name ?? '未知作者'}</b></p>

额外排查点 #

• 检查opp数组的初始状态定义，不要初始赋值为undefined/null，可以默认设为[]
• 确认接口返回的所有opps条目都完整包含postedBy字段，没有个别项缺失该属性

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