ReactJS中通过数组表示法更新嵌套对象状态值

要更新嵌套对象类型的React状态，核心是遵守状态不可变原则——不能直接修改原state里的嵌套对象，得创建新的对象层级来更新。结合你提到的数组/计算属性表示法，这里有几种实用的实现方式：

1. 针对固定嵌套层级的手动更新（最常用） #

假设你的初始状态是这样的：

this.state = {
  person: {
    name: "Dennis",
    age: 30
  }
}

如果要通过输入框动态更新person.name，可以给输入框设置name="name"，然后在处理函数里用函数式setState（确保拿到最新的prevState）结合扩展运算符：

handleInputChange = (event) => {
  const { name, value } = event.target;
  this.setState(prevState => ({
    person: {
      // 复制原person对象的所有属性
      ...prevState.person,
      // 用计算属性动态更新目标键
      [name]: value
    }
  }));
}

对应的输入框：

<input 
  type="text" 
  name="name" 
  value={this.state.person.name} 
  onChange={this.handleInputChange}
/>

如果你的嵌套层级更深（比如state.person.contact.email），只需要逐层解构：

this.setState(prevState => ({
  person: {
    ...prevState.person,
    contact: {
      ...prevState.person.contact,
      [name]: value
    }
  }
}));

2. 动态处理任意嵌套路径（通用方案） #

如果你的嵌套路径不固定（比如需要支持任意层级的动态更新），可以写一个通用工具函数来解析键路径并创建新状态。比如支持用字符串（如"person.contact.email"）或数组（如['person', 'contact', 'email']）作为路径：

// 通用嵌套状态更新函数
const updateNestedState = (prevState, path, value) => {
  // 把路径转为数组（兼容字符串和数组两种格式）
  const pathKeys = typeof path === 'string' ? path.split('.') : path;
  
  // 循环创建新的状态对象，避免修改原状态
  return pathKeys.reduce((updatedState, key, index) => {
    // 如果是最后一个键，直接赋值新值
    if (index === pathKeys.length - 1) {
      return { ...updatedState, [key]: value };
    }
    // 否则，复制当前层级的对象，继续往下处理
    return { 
      ...updatedState, 
      [key]: { ...updatedState[key] } 
    };
  }, prevState);
}

使用时，比如输入框的name设为"person.contact.email"：

handleInputChange = (event) => {
  const { name, value } = event.target;
  this.setState(prevState => updateNestedState(prevState, name, value));
}

3. 用第三方库简化（可选） #

如果觉得手动解构太繁琐，可以用Immer这个轻量级库，它允许你用“可变”的写法来实现不可变更新，代码会简洁很多：

import produce from 'immer';

handleInputChange = (event) => {
  const { name, value } = event.target;
  // 把路径转成数组
  const pathKeys = name.split('.');
  
  this.setState(produce(draftState => {
    // 遍历路径找到目标属性并赋值
    let target = draftState;
    for (let i = 0; i < pathKeys.length - 1; i++) {
      target = target[pathKeys[i]];
    }
    target[pathKeys[pathKeys.length - 1]] = value;
  }));
}

关键注意点 #

• 始终用函数式setState（即this.setState(prevState => {...})）来更新依赖旧状态的嵌套属性，避免异步更新导致的状态不一致问题。
• 绝对不要直接修改this.state里的嵌套对象（比如this.state.person.name = "NewName"），这会跳过React的状态更新机制，导致组件不重新渲染。

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