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

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

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

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

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

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

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

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