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

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

React では、データを効果的に維持することが重要です。状態の配列を操作する場合、不変性を維持することが不可欠です。配列を直接変更すると、予期しない動作が発生する可能性があります。

課題

個人「Bob」、「Sally」、および「Jack」が状態配列「人々」。目標は、空のスロットを残さずに、「Bob」などの個人を配列から削除することです。

間違った解決策

提示されたremovePeople() メソッドは、目的のインデックスにある配列要素を未定義に設定して項目を削除しようとします。ただし、このアプローチは状態を直接変更し、React の不変原則に違反します。

React Way

状態配列から項目を適切に削除するには、項目を直接変更することは避けてください。代わりに、変更された内容で新しい配列を作成します。

removePeople(e) {
    const updatedPeople = this.state.people.filter(person => person !== e.target.value);
    this.setState({people: updatedPeople});
}

Filter() から Rescue

Array.prototype.filter() は、指定された条件に基づいて新しい配列を作成します。この場合、元の "people" 配列から対象の人物を除外するために使用されます。

不変性が鍵です

React は不変のデータ構造に大きく依存しています。不変性を維持すると、データの一貫性が保証され、予期しない状態の変化が回避され、デバッグが簡素化されます。 filter() アプローチで実証されているように、配列の新しいインスタンスを作成することで、React 開発においてこの重要な原則を維持できます。

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