変更プロパティ私はこれに似たオブジェクトのプロパティを変更するオブジェクトの代わりに、配列

Question

、これは元のいくつかのプロパティを持つ単純化されたオブジェクトです：

state = { 
    pivotComuns: [ 
     { 
     id: 1, 
     enabled : true 
     }, 
     { 
     id: 2, 
     enabled : true 
    } 
    ], 
    otherProperties : "otherProperties" 
} 

私は」このような有効の状態を変更するM：

state = { 
      ...state, 
      pivotColumns: { 
       ...state.pivotColumns, 
       [2]: { 
       ...state.pivotColumns[2], enabled: !state.pivotColumns[2].enabled 
       } 
      } 
      } 

それが動作するが、代わりに復帰Iのようなアレイは、「私は} {ための[]変更通知」がオブジェクトを返すpivotComuns性がある：

state = { 
     pivotComuns: { 
      { 
      id: 1 
      enabled : true 
      }, 
      { 
      id: 2, 
      enabled : true 
     } 
     }, 
     otherProperties : "otherProperties" 
    } 

私が間違っていることは、そのプロパティを配列にしておく必要があることです。

Answer 1

私はこのような方法で普及した演算子を使用することはできないと信じています。それは値が配列であるオブジェクトのキー/値を更新することになると、私は日常的に使用してはるかに簡単な解決策があります：

var state = { 
    pivotColumns: [ 
    { 
     id: 1, 
     enabled : true 
    }, { 
    id: 2, 
    enabled : true 
    } 
], 
otherProperties : "otherProperties" 
} 

var clonedPivotColumns = state.pivotColumns.slice(); 

clonedPivotColumns[1].enabled = !state.pivotColumns[1].enabled; 

state = { 
    ...state, 
    pivotColumns: clonedPivotColumns 
} 

これはあなたに右の結果を取得すると発生しません任意の突然変異。

作業ペン http://codepen.io/finalfreq/pen/ggdJgQ?editors=1111

Answer 2

非常に遅れポストは、将来の参照のためには、次の操作を行うことができます：

state = { 
    ...state, 
    pivotColumns: state.pivotColumns.map(pc => 
    pc.id === 2 ? {...pc, enabled:!pc.enabled} : pc 
) 
} 

利点は、あなたが「古い配列に参照されたオブジェクトを変更しないということです

代わりにその場所に新しいオブジェクトを挿入します。あなたが今州で前後に行きたいなら、あなたはそうすることができます。

例： https://codepen.io/anon/pen/JyXqRe?editors=1111