具有計算對象屬性名稱的嵌套對象解構 - 反應狀態

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

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

Answer 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);