如何通过路径数组迭代访问并修改嵌套对象、数组的属性值？

可以通过你给出的[0, 'c', 'e']路径数组访问并修改e的值，原有代码无法生效是存在两个核心问题：

• 赋值逻辑错误：遍历路径之后你拿到的data是e属性的值本身，直接给临时变量data赋值只会改变这个变量的指向，不会修改原对象上e属性的取值。
• 不符合React不可变更新规则：React要求状态更新不能修改原有状态对象，你直接修改prevState的属性再返回原对象，React会认为状态没有发生变化，不会触发重渲染。

原生JS解决方案 #

不需要引入第三方依赖的实现方式如下，核心逻辑是遍历到路径的倒数第二个节点，拿到目标属性的父级对象再赋值，同时逐层拷贝路径上的对象/数组满足不可变要求：

setResponseState(prevState => {
  // 顶层状态拷贝
  const newState = {...prevState};
  newState.responseData = [...newState.responseData];
  let current = newState.responseData;

  // 遍历到路径倒数第二个节点，逐层拷贝对应层级的对象/数组
  for (let i = 0; i < path.length - 1; i++) {
    const key = path[i];
    current[key] = Array.isArray(current[key]) ? [...current[key]] : {...current[key]};
    current = current[key];
  }

  // 给目标属性赋值
  const lastKey = path[path.length - 1];
  current[lastKey] = {}; // 此处替换为你要设置的新值
  return newState;
})

简化方案（基于Immer） #

如果你的项目允许引入Immer库，可以大幅简化不可变更新的代码逻辑：

import { produce } from 'immer';

setResponseState(produce(draft => {
  let current = draft.responseData;
  path.forEach((key, index) => {
    if (index === path.length - 1) {
      current[key] = {}; // 此处替换为你要设置的新值
      return;
    }
    current = current[key];
  })
}))

Immer会自动处理所有层级的不可变拷贝，不需要手动编写拷贝逻辑，减少出错概率。

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