具有计算对象属性名称的嵌套对象解构 - 反应状态答案

【问题标题】：Nested object destructuring with computed object property names - react state具有计算对象属性名称的嵌套对象解构 - 反应状态
【发布时间】：2019-08-11 04:49:57
【问题描述】：

我正在尝试setState，但我不知道如何解构具有动态属性名称的对象的其余部分。在此示例中，id 是我表单中每个输入的动态值。计算完状态后是这样的：

{
    "inputConfig": {
        "5d4d684cadf8750f7077c739": {
            "0": "5d4d684cadf8750f7077c739",
            "isEmpty": true
        },
        "5d4d684cadf8750f7077c73c": {
            "time": "2019-08-10T12:33:42.439Z",
            "units": "f",
            "defaultValue": 6,
            "name": "Temp",
            "isEmpty": true
        }
    }
}

动态 id 持有一个带有输入配置的对象：

 "5d4d684cadf8750f7077c73c": {
        "time": "2019-08-10T12:33:42.439Z",
        "units": "f",
        "defaultValue": 6,
        "name": "Temp",
        "isEmpty": true
    }

这是我迄今为止尝试过的代码：

  this.setState(prevState => ({
        ...prevState,
        inputConfig: {
            ...inputConfig,
            [id]: {
                ...[id], // gives me {0: "5d4d684cadf8750f7077c739"} instead of the object it holds
            }
        }}),() =>{
          console.log(this.state.inputConfig)
        })

我想解构这个id 持有的对象。有没有办法做到这一点？感谢您对此提出任何建议。

【问题讨论】：

你在传播 id 而不是对象
这就是我的想法，但我怎样才能传播 id 持有的对象？由于它是动态属性我不能只写 ...id
您能否发布更多相关数据，即您的状态如何，以及id持有的对象
添加了我的状态和id的例子
因为我只想修改具有特定 ID 的输入的配置。比如想把 isEmpty 改成 true

标签： javascript reactjs setstate object-destructuring

【解决方案1】：

您需要引用特定 id 的对象

let obj = {
    "inputConfig": {
        "5d4d684cadf8750f7077c739": {
            "0": "5d4d684cadf8750f7077c739",
            "isEmpty": true
        },
        "5d4d684cadf8750f7077c73c": {
            "time": "2019-08-10T12:33:42.439Z",
            "units": "f",
            "defaultValue": 6,
            "name": "Temp",
            "isEmpty": false
        }
    }
}

let id = "5d4d684cadf8750f7077c73c"

let changed = {
  inputConfig:{
    ...obj.inputConfig,
    [id]:{
      ...obj.inputConfig[id],
      isEmpty: true
    }
  }
}

console.log(changed)

【讨论】：

那行得通！你是男人。我永远不会想到我可以像这样散布物体的其余部分。感谢您的帮助！

【解决方案2】：

如果不使用 eval，您无法在 JavaScript 中破坏为动态命名的变量。

但是如果你知道对象中可以出现的属性名，就可以动态获取对象的一个子集，使用reduce函数如下：

const destructured = (obj, ...keys) => 
  keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {});

const object = {
  id: 987637,
  color: 'blue',
  amount: 10,
};

const set1 = destructured(object, 'id');
const set2 = destructured(object, 'id', 'color', 'amount');
console.log(set1);
console.log(set2);

【讨论】：