使用新值更新不可變的 js 嵌套對象

Question

我有 2 個不可變對象。 結構如下

    const state = fromJS({
       "a":"value1",
       "b":{
          "c":"value2"
       },
       "d":[ ],
       "e":{
          "f":"value3",
          "g":{
             "h":true
          }
       }
    })
    
    and
     
    const updateVal = fromJS({
    "b":{"c": "newValue"},
       "e": {"g":{"h": false"}}
    })

我想要的結果是

     state = fromJS({
       "a":"value1",
       "b":{
          "c":"newValue"
       },
       "d":[ ],
       "e":{
          "f":"value3",
          "g":{
             "h":false
          }
       }
    })

我試過mergeWith、mergeDeep但總是得到結果

    var state = fromJS({
           "a":"value1",
           "b":{
              "c":"newValue" // this is updating as I have same new object structure
           },
           "d":[ ],
           "e":{ // here I am loosing other values
              "g":{
                 "h":false
              }
           }
        })

所以“e”中的所有內容都被“updateVal”取代

我試過的

    state.mergeWith((prev, next) => {
      if(!prev) return next;
      return next;
    }, updateVal)

這只是一個結構，“updateVal”是動態的，我不知道 updateVal 會出現什么。 因此，如果某些結構匹配，則替換這些特定值

Answer 1

我希望我能正確解釋我的方法。 您可以執行以下操作，獲取對象 A 和對象 B 並基於 A 和 B 的超集創建一個新對象 C，並使用帶有 handler的Proxy 對象。

您創建一個函數接受兩個對象並返回一個對象。 然后循環遍歷第一個對象的鍵，檢查第二個對象是否也有這些鍵，並且當您再次遇到一個對象時，這個調用需要遞歸，但我希望這能幫助您完成旅程。 如果有幫助，我也可以編寫一些示例代碼來分享。

Answer 2

merge mergeWith和update all 執行淺更新，這意味着它們只將第一層深度的任何內容復制到另一個對象中。 這樣一些值可能會丟失，因為整個地圖“e”被新地圖“e”替換。

另一方面， mergeDeep遍歷並比較每個級別的集合。 它合並了它們，結果是你所期望的：

（請注意，在 ImmutableJS 版本 3.8.x 和 4.0.x 中合並有一些差異，但在這種情況下它們無關緊要）

 const state = Immutable.fromJS({ "a": "value1", "b": { "c": "value2" }, "d": [], "e": { "f": "value3", "g": { "donttouchme": "ok", "h": true } } }); const updateVal = Immutable.fromJS({ "b": { "c": "newValue" }, "e": { "g": { "h": false } } }); const result = state.mergeDeep(updateVal); console.log(result.toJS());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/4.0.0-rc.14/immutable.min.js"></script>