Пользовательский крюк застрял в рекурсивной петле - PullRequest
Новая
       9

Пользовательский крюк застрял в рекурсивной петле

0 голосов
/ 05 ноября 2018

Пытаясь следовать примеру из документов , я сталкиваюсь с бесконечным циклом при обновлении состояния в моей функции. Код как ниже:

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);
  }
};

Это все выбирает и устанавливает правильно, но входит в рекурсивный цикл, и я не могу понять, почему.

1 Ответ

0 голосов
/ 05 ноября 2018

useEffect внутри useStudent будет запускаться при каждом запуске useStudent. Поскольку вы обновляете состояние в данной функции, оно будет бесконечно зацикливаться.

Предоставляя пустой массив в качестве второго аргумента useEffect, вы делаете так, чтобы он запускался только один раз после первоначального рендеринга. 

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

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

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

  return student;
}
...