学生 (子) コンポーネント内
useEffect
フックは handleStudentsChange
(親コンポーネントによって提供される関数) を介して親配列を更新します。 学生 (親) コンポーネント内
handleStudentsChange
関数は useCallback
フック定義を使用します。しかし、うまくいかないようです。 質問/質問
handleStudentsChange
は無期限に実行されますです
Student.tsx(子供) リーリー
Students.tsx(親) リーリー
上記のコードに示すように、student (子) コンポーネントでReact.memo を使用し、
handleStudentsChange で
useCallback を使用してみました。できればできると思います。無限ループを防ぎます。ただし、無限ループは続きます。
###質問###
handleStudentsChangeは、変更が発生したときに一度だけ無限に実行されるのではなく、最初のレンダリングから無限に実行されます。これは、
を呼び出す必要があるのは、レンダリングのたびではなく、入力を更新した後でのみです。以下に、入力から blurStudent
コンポーネントにはhandleStudentsChange
を呼び出すuseEffect
があり、これによりStudents
コンポーネントの状態が更新され、が発生するためです。 Student
コンポーネントが再レンダリングされ、useEffect
が再度呼び出されます (無限ループ)。###解決###
handleStudentsChangeイベント
が発生した後に
Students の状態を更新する例を示します。より賢い (そしてより複雑な) アプローチとして、props と state を比較して更新が必要かどうかを判断することもできますが、それは自分で判断してもらいます。