遍历对象数组生成新数组时遇TypeError：无法读取'subscriber_data'属性

这个错误的核心原因很明确：你直接访问了newdata[0].subscriber_data，但newdata[0]可能是undefined——要么是this.props.status还没加载到数据（比如React里props异步获取的场景），要么它本身就是个空数组，导致后续访问属性直接报错。

安全的解决方案 #

我们只需要在访问嵌套属性前做一层空值校验，避免直接访问undefined的属性。这里有两种常见的写法：

方法1：使用可选链+空值合并（现代JS环境推荐）

可选链操作符?.会在左侧值为undefined/null时直接返回undefined，不会继续访问后续属性；再搭配|| []确保即使subscriber_data不存在，我们也有一个空数组来执行map：

let newdata = this.props.status || []; // 确保newdata至少是个空数组
const newArr = (newdata[0]?.subscriber_data || []).map(elem => ({
  email: elem.email,
  name: elem.sub_name
}));
console.log(newArr);

方法2：传统条件判断（兼容旧环境）

如果你的运行环境不支持可选链（比如旧版浏览器），可以用if判断先确认数据存在：

let newdata = this.props.status || [];
let newArr = [];
// 先检查newdata有元素，且第一个元素存在subscriber_data
if (newdata.length > 0 && newdata[0].subscriber_data) {
  newArr = newdata[0].subscriber_data.map(function(elem) {
    return { email: elem.email, name: elem.sub_name };
  });
}
console.log(newArr);

验证效果 #

当你的JSON结构是预期的：

[ {
  "subscriber_data": [ {
    "sub_name": "User1",
    "email": "user1@gmail.com"
  } ]
} ]

两种方法都会输出你想要的结果：

[ { email: "user1@gmail.com", name: "User1" } ]

额外提醒 #

在React组件场景中，这个问题通常出现在初始渲染时props还没拿到异步数据的情况。所以养成先校验数据存在再访问嵌套属性的习惯，能避免很多类似的类型错误。

内容的提问来源于stack exchange，提问作者H.Husain