如何使用变量引用在 Javascript 中修改嵌套 object 的内部属性

Question

在 React 中，我想设置存储在 state 中的 object 的内部属性。

假设如下：

const myIndex = 0;
const [myobject, setmyobject] = useState({ 
  a: {
    b: [ 
      {c: 1}, 
      {c: 2} 
    ] 
  }
})

我想修改myobject，将b数组的第一个object中的c替换为3。

所以我想这样做：

setmyobject({...myobject, a.b[myIndex].c: 3});

但它给了我一个错误， : or, expected在第一个[ 。

这是禁止的吗？

Answer 1

不幸的是，在 object 文字中进行这样的不可变更新有点冗长：

setmyobject({
  ...myobject,
  a: {
    ...myobject.a,
    b: myobject.a.b.map((val, idx) => 
      idx === myIndex
        ? { ...val, c: 3 }
        : val
    )
  }
});

像lodash这样的库有一些你可能会觉得有用的功能，比如_.set ，它可以让你传入一个属性路径。 另一种方法可能是深度克隆 object 并对其进行变异，但如果您不想要繁重的库负担，上述模式可以正常工作。

Answer 2

我认为这将是最佳实践： https://github.com/kolodny/immutability-helper

import update from 'immutability-helper';
const updatedMyObject = update(myObject, {
    a: {b: {[myIndex]: {c: {$set: 3}}}}
});
setmyobject(updatedMyObject);

Answer 3

我看不出你为什么需要在 1 串代码中完全做到这一点。 只需复制 object 即可： const obj2 = {...obj1}

然后设置你想要的属性：

obj2.ab[myIndex].c = 3