React中如何修改useState定义的嵌套对象状态？

React状态更新必须遵循不可变原则，禁止直接修改原状态对象的属性，否则React无法检测到状态变化触发重渲染，更新嵌套状态需要逐层复制待修改路径上的外层对象，再覆盖目标属性值。

初始状态定义如下：

const [userInfo, setUserInfo] = useState({
  name: "",
  lastName: "",
  age: 0,
  education: {
    university: {
      nameUniversity: "",
      city: ""
    },
    profession: "",
    graduationYear: 0
  },
  fruit: "" 
});

原生JS手动实现（无第三方依赖） #

按照属性嵌套层级，逐层使用展开运算符做浅拷贝，再修改目标属性：

• 修改一级属性（如name、fruit、age）：仅需浅拷贝最外层对象即可

  // 示例：将name修改为"张三"
  setUserInfo({
    ...userInfo,
    name: "张三"
  })
  

• 修改二级属性（如education下的profession、graduationYear）：需要拷贝外层对象+education层对象

  // 示例：将profession修改为"软件工程"
  setUserInfo({
    ...userInfo,
    education: {
      ...userInfo.education,
      profession: "软件工程"
    }
  })
  

• 修改三级嵌套属性（如education.university下的nameUniversity、city）：需要逐层拷贝userInfo、education、university三层对象

  // 示例：将nameUniversity修改为"清华大学"
  setUserInfo({
    ...userInfo,
    education: {
      ...userInfo.education,
      university: {
        ...userInfo.education.university,
        nameUniversity: "清华大学"
      }
    }
  })
  

常见错误：直接写userInfo.education.university.city = "北京"修改原对象属性，这种写法不会触发组件重渲染，属于状态更新的典型错误写法。

表单场景通用更新函数 #

如果是多输入框表单场景，可以封装通用更新函数，通过传入属性路径更新对应值，无需为每个字段单独写更新逻辑：

const updateUserInfo = (path, value) => {
  setUserInfo(prevState => {
    const newState = { ...prevState };
    let currentLevel = newState;
    // 遍历路径逐层拷贝
    for (let i = 0; i < path.length - 1; i++) {
      const key = path[i];
      currentLevel[key] = { ...currentLevel[key] };
      currentLevel = currentLevel[key];
    }
    // 给目标属性赋值
    currentLevel[path.at(-1)] = value;
    return newState;
  })
}

// 调用示例
updateUserInfo(['education', 'university', 'city'], '北京'); // 修改三级嵌套属性
updateUserInfo(['age'], 26); // 修改一级属性

输入框绑定事件时直接传入对应路径即可，大幅减少重复代码。

复杂嵌套场景推荐：使用Immer简化写法 #

如果状态嵌套层级深，手动逐层拷贝代码冗余度高，容易漏拷贝外层对象导致更新失效，可以引入Immer库，直接编写直观的赋值语法，Immer会自动生成符合不可变要求的新状态：

1. 安装依赖
   npm install immer
2. 引入produce方法使用

import { produce } from 'immer';

// 同时修改多个嵌套属性示例
setUserInfo(
  produce(draft => {
    draft.education.university.city = "上海";
    draft.education.university.nameUniversity = "复旦大学";
    draft.age = 24;
    draft.fruit = "苹果";
  })
)

这种写法不需要手动处理展开拷贝，代码可读性更高，出错概率更低。

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