ReactJS更新状态内对象遇问题：无法访问嵌套对象属性

嘿，我明白你现在遇到的坑了——React里更新嵌套状态确实容易踩误区，你尝试用e.target.pickupAddress.city这种方式访问属性是行不通的，因为e.target是触发事件的DOM元素（比如input），它压根没有pickupAddress这个嵌套属性。咱们一步步来解决这个问题：

第一步：给表单元素设置正确的name属性 #

你需要给每个输入框设置name属性，用点分隔的字符串来标识嵌套状态的路径，比如：

// 示例：pickup地址的city输入框
<input
  type="text"
  value={this.state.pickupAddress.city}
  name="pickupAddress.city"
  onChange={this.onChange}
/>

// 示例：delivery地址的country输入框
<input
  type="text"
  value={this.state.deliveryAddress.country}
  name="deliveryAddress.country"
  onChange={this.onChange}
/>

// 包裹信息的type输入框同理
<input
  type="text"
  value={this.state.parcel.type}
  name="parcel.type"
  onChange={this.onChange}
/>

所有嵌套属性都按照父对象.子属性的格式来设置name，这样我们就能在onChange里识别要更新的状态路径。

第二步：编写能解析嵌套路径的onChange方法 #

React的状态是不可变的，不能直接修改嵌套对象，我们需要先创建状态的副本，再更新对应路径的属性。这里的核心是拆分name的路径字符串，找到要更新的嵌套属性：

onChange = (e) => {
  const { name, value } = e.target;
  // 把点分隔的路径拆分成数组，比如"pickupAddress.city" → ["pickupAddress", "city"]
  const pathSegments = name.split('.');

  // 使用函数式setState，确保基于最新的状态进行更新（避免异步更新带来的问题）
  this.setState(prevState => {
    // 先浅拷贝整个状态对象
    const updatedState = { ...prevState };
    let currentLevel = updatedState;

    // 遍历路径（除了最后一个节点），逐层创建对象副本
    for (let i = 0; i < pathSegments.length - 1; i++) {
      const key = pathSegments[i];
      currentLevel[key] = { ...currentLevel[key] };
      currentLevel = currentLevel[key];
    }

    // 更新最后一个路径节点的属性值
    const finalKey = pathSegments[pathSegments.length - 1];
    currentLevel[finalKey] = value;

    return updatedState;
  });
}

为什么要这么做？ #

1. 避免直接修改原状态：React依赖状态的不可变性来判断是否需要重新渲染组件，直接修改嵌套对象会导致React无法检测到状态变化。
2. 统一处理所有嵌套属性：这个方法可以通用处理所有嵌套层级的状态更新，不用为每个属性写单独的处理逻辑。

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