如何通过点分隔字符串变量修改嵌套对象中指定键的取值

问题本质 #

JS 的对象计算属性语法不支持自动解析.分隔的嵌套路径，当你传入"kids.eyal"作为计算属性名时，会直接把整个字符串识别为根对象的新属性名，因此不会修改嵌套层级的eyal值，只会在根层级新增同名属性。

修复方案 #

固定路径场景 #

如果"kids.eyal"是固定路径，直接手动逐层解构修改即可：

setobj(prevobj => ({
  ...prevobj,
  kids: {
    ...prevobj.kids,
    eyal: 22
  }
}))

动态路径场景 #

如果location是动态生成的路径变量，可先拆分路径再逐层更新对象：

setobj(prevobj => {
  const pathSegments = location.split('.')
  // 逐层拷贝需要修改的层级，保证状态不可变
  const newObj = {...prevobj}
  let current = newObj
  // 遍历到倒数第二层属性
  for (let i = 0; i < pathSegments.length - 1; i++) {
    const key = pathSegments[i]
    current[key] = {...current[key]}
    current = current[key]
  }
  // 修改最终目标属性值
  current[pathSegments.at(-1)] = 22
  return newObj
})

可选简化方案 #

如果项目允许引入第三方依赖，使用immer可以大幅简化嵌套状态的不可变更新逻辑：

import { produce } from 'immer'

setobj(prevobj => produce(prevobj, draft => {
  const pathSegments = location.split('.')
  let current = draft
  pathSegments.forEach((key, idx) => {
    idx === pathSegments.length - 1 
      ? current[key] = 22 
      : current = current[key]
  })
}))

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