reactjs 使用 useState 和 useEffect 避免无限循环

Question

如何避免无限循环？ 我的意思是在第一次单击时 StudentSubject 必须是未定义的，在第二次单击时它将获取数据，在我当前的代码中结果是无限循环，它不断循环console.log(getStudentId, getRelevance)如何避免这种情况？

  const [getStudentId, setStudentId]= useState();
  const [getRelevance, setRelevance]= useState();

  useEffect(() => {
    student();
  }, []);
  
  const onClickGrade = (studentId, relevance) => {

   .....
    console.log(getStudentId, getRelevance) //undefined
    if(StudentSubject === undefined){
        onClickGrade(studentId, relevance) //infinite loop
    }
   ....
  }

  const student = () => {
    .....
    view.on('click', onClickMap);
    .....
  }

  const onClickStudent = (event)=>{
      const studentId = student.getAttribute('id');
      const relevance = student.getAttribute('relevance');
      setStudentId(studentId)
      setRelevance(relevance)
      onClickGrade(studentId, relevance)
  }

Answer 1

您正在递归调用 onClickGrade

const onClickGrade = (studentId, relevance) => {

   .....
        onClickGrade(studentId, relevance) ## Infinite loop in a recursive call
   ....
  }

这取决于您想要实现的目标，但您当然需要更改您的逻辑或至少添加一个条件以防止递归中的无限循环。 您的 studentSubject 听起来总是未定义。 您可能需要保存 prevStudentSubject 并将其与当前主题进行比较。

if (studnetSubject === prevStendentSubject) return