React类组件嵌套state更新异常，仅updatedData的country字段生效

根因 #

setState 是异步批量更新操作，你在循环中连续多次调用setState时，每次用到的this.state.updatedData都是循环启动前的旧值，前面的更新会被后续的更新覆盖，最终只有最后执行的country字段更新被保留。

修复方案 #

优先推荐先在本地构造完整的新updatedData对象，再一次性调用setState更新，避免异步更新冲突，代码更简洁：

setUserData = () => {
  // 基于原有updatedData创建新对象，保留已有字段
  const newUpdatedData = { ...this.state.updatedData };

  Object.keys(this.state.userData).forEach(key => {
    const currentData = this.state.userData[key];
    if (typeof currentData !== 'object' || !currentData) return;
    
    // 取出对应key和value
    const [fieldValue] = Object.keys(currentData);
    const [fieldLabel] = Object.values(currentData);
    // 直接给新对象对应字段赋值
    newUpdatedData[key] = { label: fieldLabel, value: fieldValue };
  });

  // 一次性更新state，避免多次异步操作冲突
  this.setState({ updatedData: newUpdatedData });
}

如果你确实需要分多次更新，可以使用setState的函数式写法，基于上一次的state结果做更新，也能解决覆盖问题：

// 循环内的setState修改为函数式写法
this.setState(prevState => ({
  updatedData: {
    ...prevState.updatedData,
    [key]: data
  }
}))

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