React中如何通过动态路径名更新嵌套formData状态

点分隔路径更新嵌套state的核心要求是逐层拷贝所有父级嵌套对象，全程不直接修改原始状态引用，符合React受控组件的不可变数据规范，可直接使用的实现代码如下：

const handleChange = (e) => {
    const parts = e.target.name.split('.');
    const newValue = e.target.value;

    // 顶层状态浅拷贝
    const updatedValues = { ...formData };
    // 遍历指针，初始指向拷贝后的顶层对象
    let current = updatedValues;

    // 遍历到路径倒数第二段，逐层完成嵌套对象的浅拷贝
    for (let i = 0; i < parts.length - 1; i++) {
        const key = parts[i];
        // 拷贝当前层级的嵌套对象，切断和原状态的引用关联
        current[key] = { ...current[key] };
        // 指针下移到新拷贝的子层级
        current = current[key];
    }

    // 给最终目标字段赋值
    current[parts.at(-1)] = newValue;

    setFormData(updatedValues);
}

实现逻辑拆解 #

• 第一步先对顶层formData做浅拷贝，从根源上避免直接修改原始状态
• 遍历路径时跳过最后一段：最后一段是要赋值的目标字段，前面的所有分段都是父级嵌套层级
• 每遍历一个父级层级，就对该层级的对象做一次浅拷贝，保证所有父级路径的引用都是全新的，不会污染原状态里的其他字段
• 遍历结束后指针刚好停在目标字段的直接父对象上，直接给目标字段赋新值即可
• 如果后续需要支持带数组下标的路径（比如contact.phones.0代表联系人数组第一个元素），只需要在拷贝时加一层判断：如果当前属性值是数组，就用[...current[key]]的方式做浅拷贝即可适配，当前纯对象嵌套的表单场景不需要额外处理。

该实现无第三方依赖，原生JS即可运行，完全符合React状态更新规范，不会出现状态更新不触发重渲染、子组件缓存旧值的问题。

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