如何通过Input的name属性修改useState嵌套对象中的user.name值

原代码中，name="user.name"会被当作一个顶层属性名直接赋值，而非嵌套路径，导致无法更新user.name。要实现嵌套属性的更新，需要解析name中的路径并逐层更新对象（保持React状态的不可变性）。

方案一：使用工具函数处理嵌套更新 #

先封装一个通用的嵌套状态更新函数，再在事件处理器中调用：

import { useState } from 'react';

function App() {
  const [info, setInfo] = useState({
    idx: 1,
    user: {
      name: ""
    }
  });

  // 通用嵌套状态更新工具函数
  function updateNestedState(prevState, path, value) {
    const keys = path.split('.');
    return keys.reduce((acc, key, index) => {
      if (index === keys.length - 1) {
        return { ...acc, [key]: value };
      }
      // 逐层复制对象，避免修改原状态
      return { ...acc, [key]: { ...acc[key] } };
    }, prevState);
  }

  function handle(e) {
    const { name, value } = e.target;
    setInfo(prev => updateNestedState(prev, name, value));
  }

  return (
    <div>
      <input type="text" onChange={handle} name="idx" />
      <input type="text" onChange={handle} name="user.name" />
    </div>
  );
}

方案二：直接在事件处理器中解析路径 #

如果不需要复用更新逻辑，也可以直接在handle函数内处理路径解析：

import { useState } from 'react';

function App() {
  const [info, setInfo] = useState({
    idx: 1,
    user: {
      name: ""
    }
  });

  function handle(e) {
    const { name, value } = e.target;
    const keys = name.split('.');
    
    setInfo(prev => {
      const newState = { ...prev };
      let currentLayer = newState;
      
      // 遍历路径，逐层复制对象
      for (let i = 0; i < keys.length - 1; i++) {
        const key = keys[i];
        currentLayer[key] = { ...currentLayer[key] };
        currentLayer = currentLayer[key];
      }
      
      // 更新目标属性
      currentLayer[keys[keys.length - 1]] = value;
      return newState;
    });
  }

  return (
    <div>
      <input type="text" onChange={handle} name="idx" />
      <input type="text" onChange={handle} name="user.name" />
    </div>
  );
}

原理说明 #

两种方案核心都是：

1. 将name属性按.拆分为路径数组（比如"user.name"拆为['user', 'name']）
2. 逐层复制对象（保证状态不可变，避免直接修改原state）
3. 最终定位到目标属性并赋值

这样既可以正常更新顶层属性（如idx），也能正确更新嵌套对象中的user.name。

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