Avertissement React : la profondeur de mise à jour a dépassé la limite maximale lors de la mise à jour de l'état dans useEffect

Question

J'essaie de mettre à jour ma variable d'état qui est un objet contenant une variable booléenne. Une fois les données disponibles (en réponse à un appel API invoqué lors d'un clic sur un bouton), je mets à jour mon état dans useEffect. Ensuite, avec ces données, j'appelle un autre composant, un modal, et si aucune donnée n'est disponible, j'affiche un autre modal. Lorsque je ferme la fenêtre contextuelle, la variable d'état doit être mise à jour.

const [modalState, setModalState] = useState<IModalState>({
  showNoUsersModal: false,
  showModal: false,
});

useEffect(() => {
  if (data && data.length > 0) {
    setModalState({
      ...modalState,
      showModal: true,
      showNoUsersModal: false,
    });
  } else if (data && data.length === 0) {
    setModalState({
      ...modalState,
      showModal: false,
      showNoUsersModal: true,
    });
  }
});

const onApplicationSuccess = () => {
  setModalState({
    ...modalState,
    showModal: false,
    showNoUsersModal: false,
  });
}

const onClose = () => {
  setModalState({
    ...modalState,
    showModal: false,
    showNoUsersModal: false,
  });
}

return (
  <div>
    {modalState.showNoUsersModal && (
      <NoUsersFoundModal
        onCancel={() =>
          setModalState({
            ...modalState,
            showModal: false,
            showNoUsersModal: false,
          })
        }
      />
    )}

    {modalState.showModal && (
      <SomeOtherModal
        onCancel={() =>
          setModalState({
            ...modalState,
            showModal: false,
            showNoUsersModal: false,
          })
        }
      />
    )}
  </div>
)

Answer 1

ce problème était dû au fait que vous n'aviez transmis aucun tableau de dépendances à useEffect, donc chaque fois que l'état changeait, useEffect appelait à nouveau, voici la solution.

.

useEffect(() => {
    if (data && data.length > 0 ) {
      setModalState({
        ...modalState,
        showModal: true,
        showNoUsersModal: false,
      });
    } else if (data && data.length == 0) {
      setModalState({
        ...modalState,
        showModal: false,
        showNoUsersModal: true,
      });
    }
  },[]);

Le problème est que vous ne transmettez aucun tableau de dépendances à useEffect, donc useEffect sera appelé à nouveau à chaque fois que l'état change. Voici la solution.

useEffect(() => {
    if (data && data.length > 0 ) {
      setModalState({
        ...modalState,
        showModal: true,
        showNoUsersModal: false,
      });
    } else if (data && data.length == 0) {
      setModalState({
        ...modalState,
        showModal: false,
        showNoUsersModal: true,
      });
    }
  },[]);