Dalam komponen pelajar (kanak-kanak)

• Apabila nilai pembolehubah berubah, useEffect 挂钩将通过 handleStudentsChange(fungsi yang disediakan oleh komponen induk) mengemas kini tatasusunan induk.

Dalam komponen pelajar (ibu bapa)

• Bentangkan senarai komponen pelajar (kanak-kanak)
• Untuk mengelakkan gelung tak terhingga, handleStudentsChange 函数使用 useCallback definisi cangkuk. Namun, ia nampaknya tidak berkesan.

Soalan/Soalan

• Setelah perubahan dibuat, handleStudentsChange akan berjalan selama-lamanya
• Kenapa ni? dan bagaimana untuk memperbaikinya?
• Nota: Saya tidak memerlukan butang onSubmit

Lihat kod di sini: Saya adalah pautan CodeSandBox

Pelajar.tsx(Anak)

import React, { useState, useEffect, useRef } from "react";
import TextField from "@mui/material/TextField";

interface student {
  firstName: string;
  lastName: string;
  grade: number;
}

interface studentProps {
  id: number;
  firstName: string;
  lastName: string;
  grade: number;
  handleStudentsChange: (index: number, student: student) => void;
}

function Student(props: studentProps) {
  const [firstName, setFirstName] = useState(props.firstName);
  const [lastName, setLastName] = useState(props.lastName);
  const [grade, setGrade] = useState(props.grade);

  useEffect(() => {
    handleStudentsChange(id, {
      firstName: firstName,
      lastName: lastName,
      grade: grade
    });
  }, [firstName, lastName, grade, props]);

  return (
    <>
      <TextField
        label="firstName"
        onChange={(event) => setFirstName(event.target.value)}
        value={firstName}
      />
      <TextField
        label="lastName"
        onChange={(event) => setLastName(event.target.value)}
        value={lastName}
      />
      <TextField
        label="grade"
        onChange={(event) => setGrade(+event.target.value)}
        value={grade}
      />
    </>
  );

Pelajar.tsx(ibu bapa)

import React, { useState, useCallback } from "react";
import Student from "./Student";

interface student {
  firstName: string;
  lastName: string;
  grade: number;
}

export default function Students() {
  const [students, setStudents] = useState<student[]>([
    { firstName: "Justin", lastName: "Bieber", grade: 100 },
    { firstName: "Robert", lastName: "Oppenhiemer", grade: 100 }
  ]);

  const handleStudentsChange = useCallback(
    (index: number, updatedStudent: student) => {
      // console.log(index) //I only want this to rerender when the value change however it turn into an infinity loop
      setStudents((prevStudents) => {
        const updatedStudents = [...prevStudents];
        updatedStudents[index] = updatedStudent;
        return updatedStudents;
      });
    },
    []
  );

  return (
    <>
      {students.map((student, index) => {
        return (
          <Student
            key={index}
            id={index}
            firstName={student.firstName}
            lastName={student.lastName}
            grade={student.grade}
            handleStudentsChange={(index: number, newStudent: student) =>
              handleStudentsChange(index, newStudent)
            }
          />
        );
      })}
    </>
  );
}

Seperti yang ditunjukkan dalam kod di atas, saya cuba menggunakan React.memo pada komponen pelajar (kanak-kanak) dan useCallback pada React.memo ，并在 handleStudentsChange 上使用 useCallback dengan harapan dapat menghalang gelung tak terhingga. Walau bagaimanapun, gelung tak terhingga berterusan.