React Toastify弹窗不显示求助：关闭模态框后无法弹出提示

核心原因：缺少ToastContainer组件 #

React Toastify的提示弹窗必须依赖ToastContainer组件才能渲染——不管你在子组件提交函数还是父组件回调中调用toast.success，如果没有在应用中挂载这个容器，所有toast都会“静默失败”，不会显示任何内容。这就是你之前无论在哪调用toast都无效的根本原因。

修复步骤 #

1. 确认依赖安装
   先确保已经安装了react-toastify：

   npm install react-toastify
   # 或使用yarn
   yarn add react-toastify
   

2. 全局挂载ToastContainer
   在应用的根组件（比如App.js）或者模态框所在的父组件中，导入并渲染ToastContainer，同时引入必要的样式：

   import { ToastContainer } from 'react-toastify';
   import 'react-toastify/dist/ReactToastify.css';
   
   function App() {
     return (
       <div className="app-container">
         {/* 你的其他组件内容，包括模态框组件 */}
         <ToastContainer 
           position="top-center"
           autoClose={2000}
           hideProgressBar={true}
           closeOnClick={true}
           pauseOnHover={true}
           draggable={true}
         />
       </div>
     );
   }
   
   export default App;
   

   这里的配置会作为所有toast的默认设置，后续调用toast.success时无需重复写这些参数。

3. 验证功能恢复
   回到模态框的提交函数，原代码中的toast.success调用可以直接保留，现在就能正常显示提示了：

   const onFormSubmitHandler=(e)=>{
       e.preventDefault();
       if(!inputRef.current.value)
         return;
   
       updateUnavailableTimeSlotsInDb(inputRef.current.value, date,`${date} ${selectedTimeSlot}:00`);
       
       toast.success(`Booked for ${reasonStr} on ${selectedDate} at time ${selectedTimeSlot}:00`);
   
       inputRef.current.value='';
       setIsModalOpen(false);
     }
   

关于模态框动画延迟的补充 #

如果后续遇到模态框关闭动画遮挡toast，或者动画导致toast显示异常的情况，可以通过setTimeout延迟关闭模态框，让toast先完成渲染：

const onFormSubmitHandler=(e)=>{
    e.preventDefault();
    if(!inputRef.current.value)
      return;

    updateUnavailableTimeSlotsInDb(inputRef.current.value, date,`${date} ${selectedTimeSlot}:00`);
    
    toast.success(`Booked for ${reasonStr} on ${selectedDate} at time ${selectedTimeSlot}:00`);

    inputRef.current.value='';

    // 延迟时间需匹配模态框关闭动画的时长（比如300ms）
    setTimeout(() => {
      setIsModalOpen(false);
    }, 300);
  }

注意这里的延迟时间要和模态框组件的关闭动画时长保持一致，保证视觉上的流畅性。

内容的提问来源于stack exchange，提问作者H.b