不変性を維持しながら React 状態の配列から項目を削除するにはどうすればよいですか?

React での配列状態からの項目の削除

React では、状態の管理はコンポーネントの内部データを維持するために重要です。状態の配列を扱う場合、よくある落とし穴を避けるために不変性を維持することが不可欠です。

状態の配列から項目を削除するシナリオを考えてみましょう。一般的なアプローチは、質問に示すように、Array.prototype.delete() を使用して元の配列を変更することです:

removePeople(e) {
  var array = this.state.people;
  var index = array.indexOf(e.target.value);
  delete array[index];
}

ただし、React では、状態を直接変更することは避けることをお勧めします。代わりに、必要な変更を含む配列の新しいコピーを作成します。

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

このアプローチでは、Array.prototype.filter() メソッドを利用して、削除される要素を除くすべての要素を含む新しい配列を作成します。 。元の配列は変更されず、状態の不変性が保証されます。

このアプローチを採用することで、状態の整合性が維持され、React での状態の変更に関連する潜在的な問題が回避されます。

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