Reaktionswarnung: Die Aktualisierungstiefe hat den maximalen Grenzwert überschritten, als der Status in useEffect aktualisiert wurde

Question

Ich versuche, meine Statusvariable zu aktualisieren, bei der es sich um ein Objekt handelt, das eine boolesche Variable enthält. Sobald die Daten verfügbar sind (als Reaktion auf einen API-Aufruf, der durch Klicken auf die Schaltfläche aufgerufen wird), aktualisiere ich meinen Status in useEffect. Dann rufe ich mit diesen Daten eine andere Komponente auf, ein Modal, und wenn keine Daten verfügbar sind, zeige ich ein anderes Modal. Wenn ich das Popup schließe, sollte die Statusvariable aktualisiert werden.

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

this issue was because you didn't pass any dependency array to useEffect so when ever state was changing useEffect was calling again. here is the 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,
      });
    }
  },[]);

这个问题是因为你没有传递任何依赖数组给 useEffect，所以每当状态改变时 useEffect 就会再次调用。这里是解决方案。

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