ReactJS中如何将新对象正确更新合并到已有对象中？

你代码里有4个直接导致更新失败的问题：

• switch的判断参数写了case，这是JavaScript保留关键字，本身就会触发语法错误，需要替换成存储当前流程步骤的实际变量
• switch里写了两个完全相同的case 1分支，JS命中第一个分支执行完break后就会直接跳出判断，第二个分支永远不会执行
• 第二个分支存在笔误：定义了cE对象，却把bD赋值给了newDate属性，和你预期的结构不符
• 违反React状态更新的不可变数据原则：直接修改原对象的引用属性，不会触发React的重渲染检测，组件始终会拿到旧的对象值

如果你用函数组件+useState管理waA状态，参考以下写法：

1. 初始状态定义

import { useState } from 'react';

export default function YourComponent() {
  // 初始化状态
  const [waA, setWaA] = useState({
    jsonObject: {
      wAConfigur: {}
    }
  });

2. 事件处理函数

// 假设currentStep是你存储当前流程步骤的状态变量，取值1、2对应两个配置步骤
  function next(currentStep) {
    // 基于旧状态生成新对象，不直接修改原引用
    setWaA(prevState => {
      const newConfigur = {...prevState.jsonObject.wAConfigur};
      
      switch(currentStep) {
        case 1:
          const bD = {
            name: 'john',
            title: 'Boy'
          };
          newConfigur.configureSet = bD;
          break;
        case 2: // 修正原代码重复case1的错误
          const cE = {
            age: 34
          };
          newConfigur.newDate = cE; // 修正原代码笔误，赋值cE而非bD
          break;
        default:
          break;
      }

      // 返回全新的根对象引用，让React检测到状态变化
      return {
        ...prevState,
        jsonObject: {
          ...prevState.jsonObject,
          wAConfigur: newConfigur
        }
      };
    });
  }

3. 按钮绑定

return (
    <button onClick={() => next(/* 传入当前对应的步骤值 */)}>
      下一步
    </button>
  )
}

如果你用类组件开发，核心逻辑完全一致：不要直接修改this.state上的对象属性，调用setState时基于旧状态生成全新的对象返回即可。等两个步骤都执行完，你拿到的waA结构就会和预期完全一致。

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