配列によってレンダリングされた以前の React コンポーネントの状態を更新するメソッド

Question

[コンポーネントの追加] ボタンをクリックすると、React コンポーネントが配列に追加され、配列がレンダリングされます。各コンポーネントは、プロパティとして count フックに渡すことによってレンダリングされます。

問題は、コンポーネントが配列に追加されてレンダリングされると、ボタンを使用してカウントをインクリメントしても、カウントフックは更新されますが、配列からレンダリングされたコンポーネントは更新されないことです。 [コンポーネントの追加] ボタンをもう一度クリックすると、新しいコンポーネントが更新されたフックでレンダリングされます。ただし、以前のコンポーネントは追加されても更新されません。

App.js

リーリー

コンポーネント.jsx

ああああ

Answer 1

useState() フックは、実際にはプリミティブ型または単純なオブジェクトを格納することを推奨します。コンポーネントを格納するのは素晴らしいアイデアですが、パフォーマンスの観点から見ると、React にとって非常に大きな負担となります。

より良い解決策は、プリミティブ型の値を使用し、レンダリング時にこれらの値をマップに渡すことです。良い例を次に示します:

リーリー