REACTのCRUDに使用するJavascriptイテレータ

Reactから始めて、stateを使用して更新された情報でページを（更新せずに）再レンダリングするために必要な配列イテレーターまたはメソッドがわからない場合は、このガイドは、特定のCRUDアクションごとにどれを使用するかを理解するのに役立ちます。

まず、何を達成しようとしているのかを理解する必要があります。この例では、すべての株式をページにレンダリングし、ポートフォリオに株式を追加および削除し、株式をアルファベット順または価格で並べ替え、最後に種類に基づいて株式をフィルタリングできるようにすることのみを求められています。別のプロジェクトにジャンプして、削除と更新を示します。株式には名前、価格、タイプ、ID、およびティッカーがあることに注意してください

次に、外部APIからデータを取得します。これは、APIからデータをフェッチするだけの簡単な方法の1つです。この例では、クラスコンポーネントと設定状態を使用しています。私たちがやりたいのは、外部APIから株を取得することだけなので、フェッチしてから状態を設定する必要があります。元の株の配列を調整せずに後でフィルタリングして並べ替えることができるように、株とdisplayStocksキーを使用しています。

第三に、ポートフォリオに株式を追加したり、ポートフォリオから株式を削除したりする方法を理解したいと思います。これらの機能にアクセスする方法があることを確認してください。これらの関数を株式とポートフォリオのコンテナーに渡すことを選択し、各株式を含むdivにonClickを追加しました。クリックすると、これらの関数が実行されます。したがって、ポートフォリオに株式を追加するには、setStateを使用してポートフォリオを更新します。基本的に、ポートフォリオに株式がまだ含まれていないことを確認する3値条件を設定しました（したがって、ポートフォリオに同じ株式の重複がないようにします）。株式がすでにポートフォリオにある場合は、ポートフォリオを以前と同じポートフォリオに設定しますが、そうでない場合は、スプレッド演算子を使用してポートフォリオに株式を追加します。

ポートフォリオから株式を削除するために、ポートフォリオの状態を再度設定します。今回は、既存のポートフォリオをフィルタリングし、削除しようとしている株式と一致しない株式のみを渡します。これにより、削除するために選択した株と等しくないすべての株を含む配列が返されます。

次に、株式をアルファベット順または価格で並べ替える方法を学習します。再度、必要な場所でこれらの関数にアクセスできることを確認してください。そうすれば、関数が選択されたときにそれらを呼び出すことができます。アルファベット順の並べ替え（略してalphaSort）の場合、displayStocksの状態を設定します。 displayStocksを、名前で並べ替えられたすべての株に設定する必要があります。アルファベット順に並べ替えるには、sortメソッドを使用します。株はオブジェクトの配列であるため、それを機能させるには少し注意が必要です。引数として2つの株式を使用し、基本的に最初の株式名が2番目の株式名よりも大きいかどうかをチェックする3値条件を実行します。インデックス値が1つ低くなります。ソートは、アイテムを文字列に変更し、UTF-16値に基づいて比較することでアイテムをチェックするため、興味深い方法です（下部のリンク）。

数値による並べ替えは少し理解しやすいです。priceSortを実行するには、並べ替えが少し異なることを除いて、関数をまったく同じ方法で設定します。私たちのソートでは、価格に基づいて株価を上昇させたい場合（最低から最高）、stock1.price — stock2.priceを取得します。これを下降させたい場合は、stock2.priceを取得してstock1を減算します。それからの価格（stock2.price — stock1.price）

次に、タイプによる株式のフィルタリングを見てみましょう。ここでも、displayStocksの状態を設定しています。すべての株に行きますが、選択したタイプに一致するようにフィルタリングされます。stock.typeが選択したタイプと等しい場合、一致しない場合は配列に残り、配列には保持されません。

オブジェクトの更新と削除に基づいてDOMを再レンダリングする方法を確認できるように、別のプロジェクトに切り替えます。これらの2つの例では、おもちゃにいいねを追加し、おもちゃを削除しています。これらは両方とも永続化され、更新なしでページに再レンダリングされます。おもちゃには名前、画像、いいね、IDがあることに注意してください。

オブジェクトを更新し、更新されたオブジェクトを更新せずにページに再レンダリングするには、setStateを実行し、おもちゃをマッピングします。toys配列内のすべてのobject（toy）に対して、オブジェクトIDが更新されたtoysidと等しいかどうかをチェックする3値条件を実行します。IDが等しい場合、オブジェクトは更新されたおもちゃに置き換えられます。

最後に、オブジェクトを削除してページから削除する方法について説明します。ここで驚くことではありませんが、おもちゃの状態を設定し、すべてのおもちゃをフィルタリングします。toys配列内のすべてのおもちゃについて、IDが削除しようとしているおもちゃIDと等しくないかどうかを確認しています。削除されたおもちゃのIDと等しくないIDを持つおもちゃのみが配列内に保持されます。