ReactJSでは、SAMEコンポーネントを複数回表示できますか？

Question

私はデータのリストを持っていると考えてください。

各行にはユーザー名列が含まれています。

username列には、UserName反応コンポーネントが含まれています。

UserNameコンポーネントは、componentDidMount（）でHTTP GETから実際のユーザー名を取得するためにajaxリクエストを行います。

複数の行には同じユーザー名が含まれます。

問題は、固有のユーザー名ごとに1つのajaxリクエストを送信するにはどうすればいいですか？

現在、各UserNameコンポーネントが独自のajaxリクエストを送信して、HTTP GETからユーザー名を取得しています。

私はreduxを使用しないので、それは解決策ではありません。

おかげ

Answer 1

は、だから、コンポーネント（あなたVirtualDOMツリー内の最後の葉）、プレゼンテーション内のアプリケーションのデータを格納する必要がありません。

解決策 - 親コンポーネント内のすべてのデータをcomponentDidMountメソッドで取得した後、初期データを各コンポーネントに渡します。

また、ボタンをクリックするなど、ユニークなコンポーネントごとにajaxリクエストを実行することもできます。それは現在のコンポーネントの状態を変更し、親のグローバル状態を更新するためにコールバックに触れる必要があります。

Answer 2

親コンポーネントでAJAX関数を呼び出し、データのリストの各子コンポーネントにキーがあることを確認できます。

親コンポーネントの状態はusernamesである必要があります。親のcomponentDidMount()関数では、配列usernamesを設定します。バックエンドから複数のユーザー名を取得できると仮定すると、1回の呼び出しでなければなりません。

this.state.usernames.map((un, i) => { 
    return <UserName key={i} {...un} /> 
})}; 

keyは、コンポーネント間の一意性のために必要とされている：

次に、あなたのrender()機能で、あなたはUserNameコンポーネントを生成するためにmapを使用することができます。