时间戳

首页 > 解决方案 > 如何通过迭代路径来访问和编辑对象值？

javascript - 如何通过迭代路径来访问和编辑对象值？

问题描述

具有以下数据结构：

const foo = [
    {
        a: 'xxx',
        b: 'xxx',
        c: {
            e: 'xxx',
            ...
        }
    }
    ...
]

e是否可以使用此路径对象访问值

const path = [0, 'c', 'e']

并编辑它？

我试着做

setResponseState(prevState => {
    let data = prevState.responseData
    path.forEach(id => data = data[id])

    data = {}
    return prevState
})

path是一个上下文值，但我发现data是一个副本，因此没有保存在反应状态

谢谢

标签： javascriptobjectreact-hookspropertiespropertypath

解决方案

如果您修改forEach如下更新最后一个值应该适用于编辑对象。基本上这避免了覆盖对象引用并且只更新值。

const foo = [
  {
    a: "xxx",
    b: "xxx",
    c: {
      e: "xxx",
    },
  },
];


const path = [0, "c", "e"];

setResponseState((prevState) => {
  let data = prevState.responseData;
  path.forEach((id, i) =>
    i === path.length - 1 ? (data[id] = {}) : (data = data[id])
  );
  return prevState;
});

检查这个样本变异对象

const foo = [
  {
    a: "xxx",
    b: "xxx",
    c: {
      e: "xxx",
    },
  },
];

const path = [0, "c", "e"];


  let data = foo;
  path.forEach((id, i) =>
    i === path.length - 1 ? (data[id] = {}) : (data = data[id])
  );

console.log(foo)

推荐阅读