运行React类组件代码报Cannot set properties of undefined (setting 'value')错误如何解决

报错触发原因 #

该报错本质是尝试给undefined的value属性赋值，具体触发点有两个：

• setState是React的异步更新方法，调用this.setState({ initialResponse: initialResponse.data })后，当前上下文的this.state不会立刻更新，后续代码访问this.state.initialResponse["selectedFieldInfos"]时，initialResponse可能还是初始的undefined，导致后续属性访问出错。
• 嵌套对象没有做存在性校验：即使initialResponse取值正常，当stateObj[sectionKey]下不存在对应的fieldKey属性时，stateObj[sectionKey][fieldKey]的值为undefined，直接给它的value属性赋值就会触发该报错。

额外说明：代码中使用map遍历数组但没有返回值，属于不合理用法，替换为forEach更符合语义。

修复方案 #

1. 将依赖更新后initialResponse的逻辑放到setState的回调函数中，保证取到的是更新后的state
2. 给嵌套对象添加兜底初始化逻辑，确保赋值前目标对象存在
3. 替换map为forEach符合遍历语义

修复后参考代码：

this.setState({ initialResponse: initialResponse.data }, () => {
  // setState回调中才能拿到最新的state
  const stateObj = { ...this.props.airlineAdminEditResponse };
  Object.keys(stateObj).forEach(sectionKey => {
    let sectionStateObj = stateObj[sectionKey];
    if (this.state.initialResponse?.selectedFieldInfos?.[sectionKey]) {
      let sectionObj = this.state.initialResponse.selectedFieldInfos[sectionKey];
      Object.keys(sectionObj).forEach(fieldKey => {
        if (sectionObj[fieldKey]) {
          let fieldObj = sectionObj[fieldKey];
          // 兜底初始化嵌套对象
          if (!stateObj[sectionKey][fieldKey]) {
            stateObj[sectionKey][fieldKey] = {};
          }
          stateObj[sectionKey][fieldKey].value = fieldObj;
        }
      });
    }
  });
  // 后续处理stateObj的逻辑也放在这里
});

如果你的运行环境不支持可选链?.语法，可以把可选链的地方替换为普通的层层判空逻辑即可。

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