ギャップを残さずにアイテムを React 状態から削除するにはどうすればよいですか?

React 状態からの項目の削除

質問は、React の状態内の配列から「Bob」などの項目を削除することに関するものです。この課題は、空席を残さずに配列の整合性を維持する必要があることから生じます。

以前は、削除ミューテーションを使用して手動で Bob を削除しようとしましたが、失敗しました。代わりに、React の原則に準拠したソリューションをお勧めします。

不変配列の操作

React では、状態値の直接操作を禁止しています。状態内の配列を変更するには、新しいコピーを作成する必要があります。

Array.prototype.filter()

最も簡単なアプローチは、Array.prototype を利用することです。 filter() を使用して、削除する項目を省略した新しい配列を構築します。例:

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

このコードは、this.state.people の各要素を反復処理して新しい配列を作成します。名前が削除する項目と等しくない場合 (例: "Bob")、その名前は新しい配列に保持されます。

結論

filter() の使用状態の不変性を保証し、配列の整合性を維持し、削除によって残った空のスロットを排除します。

以上がギャップを残さずにアイテムを React 状態から削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。