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

Question

我有这个 function 将数据提交给 API，在提交时调用 function，然后用成功数据显示祝酒词。 作为下一步，我导航到另一个页面并显示祝酒词。 但它只导航，不显示吐司。

 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) ); };

导航路线上的 Toastcontainer

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

我先尝试了类似问题的答案，但没有用。 我正在浏览的页面上有一个 toastcontainer。

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

谢谢。

Answer 1

我尝试了 1ms 的 settimeout 并且它有效。 感觉像 hack，但看起来不错。

 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) ); };