親コンポーネントの配列に対する子コンポーネントの更新によって引き起こされる無限の再レンダリングを防止します

Question

Student (子) コンポーネントでは、変数の値が変更されると、useEffect フックが handleStudentsChange (親コンポーネントによって提供される関数) を通じて親配列を更新します。 Student (親) コンポーネントに Student (子) コンポーネントのリストを表示する 無限ループを防ぐために、useCallback フックを使用して handleStudentsChange 関数を定義します。しかし、うまくいかないようです。質問/質問 変更が発生すると、handleStudentsChange は無期限に実行されます。これはなぜですか?同様に

P粉955063662 · Answer

＃＃＃質問＃＃＃

handleStudentsChange

は、変更が発生したときに一度だけ無限に実行されるのではなく、最初のレンダリングから無限に実行されます。これは、Student コンポーネントには handleStudentsChange を呼び出す useEffect があり、これにより Students コンポーネントの状態が更新され、 が発生するためです。 Studentコンポーネントが再レンダリングされ、useEffect が再度呼び出されます (無限ループ)。 ＃＃＃解決＃＃＃handleStudentsChange

を呼び出す必要があるのは、レンダリングのたびではなく、入力を更新した後でのみです。以下に、入力から

blur

イベント が発生した後に Students の状態を更新する例を示します。より賢い (そしてより複雑な) アプローチとして、props と state を比較して更新が必要かどうかを判断することもできますが、それは自分で判断してもらいます。




const {フラグメント、StrictMode、useCallback、useEffect、useState} = 反応;
const { createRoot } = ReactDOM;
const { TextField } = マテリアルUI;

関数 Student(小道具) {
  const [firstName, setFirstName] = useState(props.firstName);
  const [lastName, setLastName] = useState(props.lastName);
  const [グレード, setGrade] = useState(props.grade);
  const handleStudentsChange = props.handleStudentsChange;
  
  const onBlur = () => {
    handleStudentsChange(props.id, {
      ファーストネーム、
      苗字、
      学年、
    });
  };

  戻る （
    ＜フラグメント＞
      <テキストフィールド
        ラベル="名"
        onBlur={onBlur}
        onChange={(イベント) => setFirstName(event.target.value)}
        値={名}
      />
      <テキストフィールド
        ラベル="姓"
        onBlur={onBlur}
        onChange={(イベント) => setLastName(event.target.value)}
        値={姓}
      />
      <テキストフィールド
        ラベル="グレード"
        onBlur={onBlur}
        onChange={(イベント) => setGrade(event.target.value)}
        値={グレード}
      />
    
  );
}

関数 Student() {
  const [students, setStudents] = useState([
    { 名: "ジャスティン"、姓: "ビーバー"、学年: 100 },
    { 名: "ロバート"、姓: "オッペンハイマー"、学年: 100 }
  ]);

  const handleStudentsChange = useCallback(
    (インデックス、更新された学生) => {
      // console.log(index) // 値が変更されたときにのみ再レンダリングしたいのですが、無限ループになってしまいます
      
      console.log({ updatedStudent });

      setStudents((prevStudents) => {
        const updatedStudents = [...prevStudents];
        updatedStudents[インデックス] = updatedStudent;
        updatedStudents を返します。
      });
    }、
    []
  );

  戻る （
    ＜フラグメント＞
      {students.map((student, インデックス) => {
        戻る （
          
        );
      })}
    
  );
}

関数 App() {
  戻る （
    
      
    
  );
}

const root = createRoot(document.getElementById("root"));
root.render();
<スクリプト クロスオリジン src="https://unpkg.com/react@18/umd/react.development.js">