React为API返回的对象数组新增属性时报undefined错误如何解决

• 核心报错原因是你尝试访问的newData[index]为undefined，再给它设置age属性就触发了该错误，具体诱因有两个：
  1. 你要操作的prevState.newData是数组类型，但你用Object.assign({}, prevState.newData)将其拷贝为了键为数组下标的普通对象，如果传入的index超出原数组的最大索引，对应键不存在就会返回undefined。
  2. 你没有在state初始化时给newData设置空数组作为默认值，首次执行方法时prevState.newData本身为undefined，拷贝后得到的空对象访问任意下标都是undefined。
• 额外隐藏问题：你直接修改newData[index].age属于直接修改原state的对象引用，违反React state不可变更新原则，可能出现修改后视图不更新的异常。

遵循React不可变更新规则，先拷贝数组、校验下标合法性、再拷贝对应项对象修改属性，正确代码如下：

addAge = (age, index) => {
  this.setState((prevState) => {
    // 拷贝原数组
    const newData = [...prevState.newData];
    // 校验下标合法性，避免访问undefined
    if (index < 0 || index >= newData.length) return { newData };
    // 拷贝目标对象并新增age属性，不修改原引用
    newData[index] = {
      ...newData[index],
      age
    };
    return { newData };
  });
};

同时注意在state初始化时给newData设置空数组初始值：

constructor(props) {
  super(props);
  this.state = {
    newData: []
  };
}

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