配列内のオブジェクトの1つを不変の方法で更新する

Question

Reactのthis.stateでは、以下のオブジェクトの動的配列を含むformErrorsというプロパティがあります。

[ 
    {fieldName: 'title', valid: false}, 
    {fieldName: 'description', valid: true}, 
    {fieldName: 'cityId', valid: false}, 
    {fieldName: 'hostDescription', valid: false}, 
] 

のは、私はtrueの有効な値にフィールド名cityIdを持つ状態のオブジェクトを更新する必要があるとしましょう。

これを解決する最も簡単で最も一般的な方法は何ですか？

ライブラリimmutability-helper、immutable-jsなど、またはES6のいずれも使用できます。私は4時間以上これを試してグーグルで試しましたが、それでも私の頭を包み込むことはできません。いくつかの助けに非常に感謝しています。

Answer 1

あなたはフィールド名がcityIdであれば、データを反復処理し、フィールド名を確認するためにmapを使用することができますが、あなたは値を変更する必要があり、新しいオブジェクトそうちょうどreturn同じobjectを返す。

はこのようにそれを書く：

var data = [ 
    {fieldName: 'title', valid: false}, 
    {fieldName: 'description', valid: true}, 
    {fieldName: 'cityId', valid: false}, 
    {fieldName: 'hostDescription', valid: false}, 
] 

var newData = data.map(el => { 
        if(el.fieldName == 'cityId') 
        return Object.assign({}, el, {valid:true}) 
        return el 
       }); 

this.setState({ data: newData }); 

Answer 2

約immutability-helper？非常にうまく動作します。あなたは$mergeコマンドを探しています。

@FellowStranger：私は、私のredux状態の1つのセクションしかオブジェクトの配列ではありません。私は、正しいエントリを更新するために減速してインデックスを使用します。

case EMIT_DATA_TYPE_SELECT_CHANGE: 
    return state.map((sigmap, index) => { 
    if (index !== action.payload.index) { 
     return sigmap; 
    } else { 
     return update(sigmap, {$merge: { 
     data_type: action.payload.value 
     }}) 
    } 
}) 

は率直に言って、これは一種の脂っこいある、と私は私の状態オブジェクトの一部を変更しようとするが、それは仕事をして...それはdoesnのあなたはレフィックスを使用しているような音ですが、戦術は似ているはずです。

Answer 3

代わりに、配列に値を格納するあなたは簡単に更新したいどの要素を指定することができますので、私は強く代わりにオブジェクトを使用することをお勧め。キー下の例ではフィールド名ですが、それは任意の一意の識別子を指定できます

var fields = { 
    title: { 
     valid: false 
    }, 
    description: { 
     valid: true 
    } 
} 

その後、あなたは不変ヘルパーのupdate機能を使用することができます。

var newFields = update(fields, {title: {valid: {$set: true}}})