Reactjs Évitez la boucle infinie en utilisant le useState et useEffect.

Question

Comment éviter la boucle infinie? Je veux dire lors du premier clic, StudentSubject doit être indéfini, et lors du deuxième clic, il récupérera les données, dans mon code actuel le résultat est une boucle infinie, il continue à boucler sur console.log(getStudentId, getRelevance) comment éviter cela?

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

  useEffect(() => {
    student();
  }, []);

  const onClickGrade = (studentId, relevance) => {

   .....
    console.log(getStudentId, getRelevance) //indéfini
    if(StudentSubject === undefined){
        onClickGrade(studentId, relevance) //boucle infinie
    }
   ....
  }

  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

Vous appelez de manière récursive onClickGrade

const onClickGrade = (studentId, relevance) => {

   .....
        onClickGrade(studentId, relevance) ## Boucle infinie dans un appel récursif
   ....
  }

Cela dépend de ce que vous voulez réaliser mais vous devez certainement modifier votre logique ou au moins ajouter une condition pour éviter une boucle infinie en récursion ! Votre studentSubject semble rester toujours indéfini. Vous pourriez avoir besoin de sauvegarder prevStudentSubject et de le comparer avec le sujet actuel.

if (studnetSubject === prevStendentSubject) return