React で配列を不変に更新してローカル ストレージに保存するにはどうすればよいですか?

Question

レシピアプリを作っています。ユーザーがレシピをお気に入りリストに追加できるようにしたいと考えています。 3 つの React コンポーネントが関係しています。レシピをお気に入りやお気に入りに追加します。

レシピ コンポーネントには、選択したレシピに関するさまざまな詳細が表示されます。

AddToFavorites コンポーネントは、Recipe コンポーネントでレンダリングされるボタンです。

お気に入りコンポーネントは、[お気に入りに追加] ボタンを使用してお気に入りに追加されたすべてのアイテムを表示するリストです。

リーリー リーリー リーリー

これまでにやろうとしたこと:

• API データをレシピの「詳細」属性として AddToFavorites に渡します。
• AddToFavorites のお気に入りをデフォルトの空の配列状態に設定します。
• AddToFavorites に onClick イベントを追加してお気に入りボタンに追加し、AddToFavorites() 関数を呼び出します。
• AddToFavorites() 関数では、スプレッド演算子を使用し、受け取った詳細プロップ (API データ付き) を新しいアイテムとしてステータス配列の新しいコピーに追加し、それを保存することで、お気に入りのステータスを永続的に更新しようとします。ローカルストレージ。

アイテムをお気に入りに追加するときは、1 つのアイテムを追加することも、複数回追加することもできます。しかし、新しいレシピに移動して別のアイテムを追加すると、古いアイテムが削除されて再起動されます。

数日間調べて、さまざまなことを試しましたが、わかりません。

Answer 1

これは共有状態の良い例と思われます。 お気に入りデータが 1 か所で管理されている場合、データを追加、削除、または表示するときに同期の問題は発生しません。

コンテキストを作成することをお勧めします

リーリー

次に、アプリケーションの関連部分をコンテキスト プロバイダーでラップします (例:

) リーリー

お気に入りの読み取りまたは変更が必要な場合は常にコンテキスト フックを使用します リーリー

Redux などの他の形式の状態管理を使用することもできます。

---