导航到另一个页面后显示react-toastify toast

Question

我有一个函数，可以在提交时将数据提交到 API 调用函数，然后使用成功数据显示一个 toast。作为下一步，我导航到另一个页面并显示 toast。但它只导航，不显示吐司。

const submitHandler = () => {
    updatePatient(
      data,
      (successData: any) => {
        toast.success(successData, {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: true,
          closeOnClick: false,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
        navigate("/allpatients");
      },
      (errorData: any) => console.log(errorData)
    );
  };

导航路线上的 Toast 容器

<ToastContainer
        position="top-right"
        autoClose={5000}
        hideProgressBar
        newestOnTop={false}
        closeOnClick={false}
        rtl={false}
        pauseOnFocusLoss={false}
        draggable
        pauseOnHover
        theme="light"
      />

我先尝试了类似问题的答案，但没有成功。我正在导航的页面上有一个 toast 容器。

我尝试删除导航，然后它工作正常。但我需要导航。

谢谢。

Answer 1

我尝试了 1 毫秒的设置超时，它有效。感觉像是黑客，但看起来不错。

const submitHandler = () => {
    updatePatient(
      data,
      (successData: any) => {
        navigate("/allpatients");
        setTimeout(() => {
          toast.success(successData, {
            position: "top-right",
            autoClose: 5000,
            hideProgressBar: true,
            closeOnClick: false,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "light",
          });
        }, 1);
      },
      (errorData: any) => console.log(errorData)
    );
  };

Answer 2

你可以使用这个方法。将您的

<ToastContainer />

放入应用程序组件中。