自定义挂钩卡在递归循环中

Question

尝试遵循 docs 中的示例，我在函数中更新状态时遇到无限循环。代码如下：

Home.jsx:

...
import { studentDefaults } from "./student";
import { getStudent } from "./api";

function useStudent() {
  const [student, setStudent] = useState(studentDefaults);

  function handleStudentChange(student) {
    setStudent(student);
  }

  // Fetch the student after mount
  useEffect(() => {
    getStudent(handleStudentChange);
  });
  return student;
}

function StudentForm(props) {
  // Use the student here
  const student = useStudent();
  return ( <MyComponent student={student} /> )
}

api.js:

import request from "request-promise";
import { auth } from "./firebase/firebase";

const url =
  "http://localhost:5000/projectID/region/api";

export const getStudent = async handleStudentChange => {
  try {
    const token = await auth.currentUser.getIdToken(false);
    const student = await request(url + `?token=${token}`);
    handleStudentChange(student);
  } catch (e) {
    console.error(e);
  }
};

这一切都正确地获取和设置，但它进入了一个递归循环，我不明白为什么。

Answer 1

每当 useStudent 是运行时，useStudent 里面的 useEffect 就会是运行。因为你在给它的函数中更新状态，它会无限循环。

通过将一个空数组作为 useEffect 的第二个参数，您可以在初始渲染后仅运行一次。

function useStudent() {
  const [student, setStudent] = useState(studentDefaults);

  function handleStudentChange(student) {
    setStudent(student);
  }

  // Fetch the student after mount
  useEffect(() => {
    getStudent(handleStudentChange);
  }, []);

  return student;
}

自定义挂钩卡在递归循环中

Custom hook stuck in recursive loop

reactjs

react-hooks