Amaran tindak balas: Kedalaman kemas kini melebihi had maksimum apabila mengemas kini keadaan dalam useEffect

Question

Saya cuba mengemas kini pembolehubah keadaan saya yang merupakan objek yang mengandungi pembolehubah boolean. Setelah data tersedia (sebagai tindak balas kepada panggilan API yang digunakan pada klik butang), saya mengemas kini keadaan saya di dalam useEffect. Kemudian dengan data ini saya memanggil komponen lain, modal, dan jika tiada data tersedia, saya menunjukkan modal lain. Apabila saya menutup pop timbul, pembolehubah keadaan harus dikemas kini.

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

Isu ini adalah kerana anda tidak menghantar sebarang tatasusunan kebergantungan kepada useEffect jadi apabila keadaan berubah useEffect memanggil semula di sini penyelesaiannya.

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

Masalahnya adalah kerana anda tidak menghantar sebarang tatasusunan kebergantungan kepada useEffect, jadi useEffect akan dipanggil semula setiap kali keadaan berubah. Inilah penyelesaiannya.

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