web-dev-qa-db-ja.com

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

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

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

FieldName cityIdを持つ状態のオブジェクトをtrueの有効な値に更新する必要があるとしましょう。

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

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

javascriptreactjsecmascript-6immutability
17
Fellow Stranger

mapを使用してデータを反復処理し、fieldNameを確認できます。fieldNameがcityIdの場合、値を変更する必要があり、新しいオブジェクトを返すそれ以外の場合は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 });
20
Mayank Shukla

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
      }})
    }
})

率直に言って、これは一種の油汚れであり、状態オブジェクトのその部分を変更するつもりですが、動作します... reduxを使用しているようには聞こえませんが、戦術は似ているはずです。

1
Omortis

サンプルの例を次に示します-ES6

leftはコードで、rightは出力です

enter image description here

これは以下のコードです

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

const newData = data.map(obj => {
  if(obj.fieldName === 'cityId') // check if fieldName equals to cityId
     return {
       ...obj,
       valid: true,
       description: 'You can also add more values here' // Example of data extra fields
     }
  return obj
});

const result = { data: newData }; 

console.log(result);

this.setState({ data: newData });

これがお役に立てば幸いです、ハッピーコーディング！

1
EsterlingAccime Youtuber

配列に値を保存する代わりに、更新する要素を簡単に指定できるように、代わりにオブジェクトを使用することを強くお勧めします。次の例では、キーはfieldNameですが、任意の一意の識別子にすることができます。

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

次に、不変性ヘルパーのupdate関数を使用できます。

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