React中如何优雅更新嵌套对象状态？支持动态嵌套层级

问题场景 #

当React状态是嵌套对象时，直接使用name="key.value"这种路径式属性名，用常规的展开语法会新增"key.value"键而非更新嵌套属性，需要一种通用的方式处理任意层级的嵌套状态更新，且无需硬编码层级结构。

解决方案 #

通过编写一个通用的状态更新工具函数，解析路径字符串并递归更新嵌套对象，同时严格遵循React状态不可变原则。

1. 通用状态更新工具函数

这个函数接收当前状态、路径字符串和新值，返回更新后的新状态：

const updateNestedState = (state, path, value) => {
  const pathSegments = path.split('.');
  return pathSegments.reduce((updatedState, segment, idx) => {
    // 处理最后一个路径片段，直接赋值
    if (idx === pathSegments.length - 1) {
      return { ...updatedState, [segment]: value };
    }
    // 递归处理嵌套层级，若当前层级不存在则创建空对象
    const nextLevel = updatedState[segment] || {};
    return {
      ...updatedState,
      [segment]: updateNestedState(nextLevel, pathSegments.slice(idx + 1).join('.'), value)
    };
  }, { ...state });
};

2. 组件中使用示例

将工具函数结合useState的更新逻辑，绑定到输入框的onChange事件：

import { useState } from 'react';

function App() {
  const [sample, setSample] = useState({
    key: {
      value: '',
      otherValue: ''
    },
    deepNested: {
      level1: {
        level2: {
          content: ''
        }
      }
    }
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 传入前状态、路径和新值，生成新状态
    setSample(prevState => updateNestedState(prevState, name, value));
  };

  return (
    <div>
      <input
        type="text"
        name="key.value"
        value={sample.key.value}
        onChange={handleInputChange}
        placeholder="key.value"
      />
      <input
        type="text"
        name="key.otherValue"
        value={sample.key.otherValue}
        onChange={handleInputChange}
        placeholder="key.otherValue"
      />
      <input
        type="text"
        name="deepNested.level1.level2.content"
        value={sample.deepNested.level1.level2.content}
        onChange={handleInputChange}
        placeholder="deep nested content"
      />
    </div>
  );
}

export default App;

方案优势 #

• 无硬编码：无需针对不同嵌套层级编写单独的更新逻辑，路径完全由输入框的name属性定义
• 支持任意层级：不管嵌套深度如何，只要name属性的路径格式正确（用.分隔层级），就能正确更新
• 保持不可变性：全程通过对象展开创建新对象，不会修改原状态，符合React的状态更新规范
• 复用性强：工具函数可以抽离到公共工具文件，在整个项目中复用

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