React で状態配列から項目を安全に削除するにはどうすればよいですか?

React での配列からの項目の削除: ガイド

React では、状態の管理はアプリケーションの動作の整合性を維持するために重要であり、ユーザーエクスペリエンス。一般的なシナリオには、項目の追加、削除、更新など、状態内の配列の操作が含まれます。

状態配列から項目を削除する方法を理解するために、簡単な例を考えてみましょう。

ボブ、サリー、ジャックの 3 人のリストを状態配列に保存したいとします。リストからそれらのいずれかを削除できる必要があります。削除された場合、配列には空のスロットがあってはなりません。

React コンポーネントには、次のコードがある場合があります:

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

ただし、removePeople() 関数のこの実装は、呼び出されたときに意図したとおりに動作しません。その理由は、React が状態の変更を処理する方法にあります。

React では状態を直接変更しないでください

状態のオブジェクトまたは配列を更新するときは、新しいオブジェクトを作成することが不可欠ですコピー。元の状態オブジェクトまたは配列を直接変更すると、予期しない動作や潜在的なバグが発生する可能性があります。

この場合、配列から要素を直接削除すると、元の状態オブジェクトが変更され、オブジェクトの更新はトリガーされません。 Reactの状態。状態は変更されず、UI にはリストからの Bob の削除は反映されません。

安全な削除のための Array.prototype.filter() の使用

React と互換性のある方法で状態配列から項目を削除するには、いくつかのオプションがあります。効果的な方法の 1 つは、Array.prototype.filter() を利用することです。

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

このアプローチでは、フィルター処理された結果を含む新しい配列が作成されます。この場合、ターゲット値を持つ人物がフィルタリングされ、事実上リストから削除されます。結果の新しい配列が状態として設定され、項目の削除を反映するために必要な UI 更新がトリガーされます。

以上がReact で状態配列から項目を安全に削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。