如何更新React状态中的子节点？嵌套状态值动态设置问题

问题核心 #

你当前的问题有两个关键错误：

1. 输入框命名错误：第三个输入框的name写了sub3，但对应的值是values.subText.sub2，完全不匹配，得改成subText.sub2；另外前两个子字段的name只写sub1/sub2，没法让更新逻辑识别它属于subText层级，导致新值被直接塞到根节点。
2. 普通更新逻辑不支持嵌套对象：setValues({ ...values, [name]: value })这种写法只能更新根节点的字段，没法处理subText这类嵌套对象的深层更新。

修正方案 #

第一步：修正输入框的name属性

给嵌套字段的name加上层级路径，用.分隔明确归属：

<input name="text" value={values.text} onChange={handleChange} />
<input name="subText.sub1" value={values.subText.sub1} onChange={handleChange} />
<input name="subText.sub2" value={values.subText.sub2} onChange={handleChange} />

第二步：实现嵌套状态更新逻辑

提供两种实用的实现方式：

方式一：原生JS实现（无需额外依赖）

写一个通用函数解析字段路径，逐层拷贝更新避免修改原对象：

import { useState } from 'react';

function YourComponent() {
  const [values, setValues] = useState({
    text: "some string",
    subText: {
      sub1: "sub string 1",
      sub2: "sub string 2"
    }
  });

  const updateNestedState = (state, fieldPath, value) => {
    const keys = fieldPath.split('.');
    const newState = { ...state };
    let currentLayer = newState;

    // 遍历到倒数第二层，确保每一层都是新对象
    for (let i = 0; i < keys.length - 1; i++) {
      currentLayer[keys[i]] = { ...currentLayer[keys[i]] };
      currentLayer = currentLayer[keys[i]];
    }

    // 更新目标字段
    currentLayer[keys[keys.length - 1]] = value;
    return newState;
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues(prevState => updateNestedState(prevState, name, value));
  };

  // 组件渲染逻辑...
}

方式二：用Immer库简化（更简洁）

如果频繁处理嵌套状态，推荐用Immer，它允许你直接“修改”草稿对象，自动生成不可变的新状态：
先安装Immer：

npm install immer

然后修改更新逻辑：

import { useState } from 'react';
import produce from 'immer';

function YourComponent() {
  const [values, setValues] = useState({
    text: "some string",
    subText: {
      sub1: "sub string 1",
      sub2: "sub string 2"
    }
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    const keys = name.split('.');

    setValues(produce(draft => {
      let currentLayer = draft;
      for (let i = 0; i < keys.length - 1; i++) {
        currentLayer = currentLayer[keys[i]];
      }
      currentLayer[keys[keys.length - 1]] = value;
    }));
  };

  // 组件渲染逻辑...
}

原写法失效原因 #

{ ...values, [name]: value }只会创建根节点的新对象，替换根层级的键值对。比如当name是sub1时，它会在根对象新增sub1字段，而不是修改values.subText.sub1，这就是新值跑到根节点的直接原因。

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