React中如何合并对象实现嵌套属性更新？

假设你有原对象：

const originalObj = {
  name: 'John Max',
  plan: { active: true }
};

以及包含点路径的更新对象：

const updateObj = { fields: { "plan.active": false } };

要实现只修改plan.active的值且保持对象不可变性（符合React状态更新的要求），可以用以下两种方式：

手写工具函数（无第三方依赖） #

先写一个解析点路径并更新嵌套属性的函数，确保每次更新都返回新对象：

function updateNestedProperty(obj, path, value) {
  const keys = path.split('.');
  return keys.reduceRight((acc, key, index) => {
    if (index === 0) {
      return { ...obj, [key]: acc };
    }
    return { [key]: acc };
  }, value);
}

然后遍历更新对象中的字段，批量应用更新：

const updatedObj = Object.entries(updateObj.fields).reduce((result, [path, value]) => {
  return updateNestedProperty(result, path, value);
}, originalObj);

// 结果：{ name: 'John Max', plan: { active: false } }

使用第三方库（如Lodash） #

如果项目中已经引入Lodash，可以直接用set方法简化操作，它会自动处理嵌套路径并返回新对象：

import { set } from 'lodash';

const updatedObj = set({ ...originalObj }, "plan.active", updateObj.fields["plan.active"]);

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