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

Question

我正在尝试 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 持有的对象。有办法吗？我很感激任何关于这方面的建议。

Answer 1

如果不使用 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);

Answer 2

您需要引用特定 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)

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

Nested object destructuring with computed object property names - react state

javascript

setstate

reactjs

object-destructuring

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

Nested object destructuring with computed object property names - react state

javascript

setstate

reactjs

object-destructuring

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