React Toastify 登录提交后无法渲染通知问题求助

安全阿岳

2026-5-11

问题分析与解决方案

首先，你调用toast.success()的语法本身是正确的，但核心问题是你没有在应用中添加React Toastify必需的ToastContainer组件——这个组件是所有toast通知的挂载容器，没有它的话，toast没有地方渲染，自然不会显示出来。

下面是具体的修复步骤：

1. 导入并添加`ToastContainer`组件

首先在你的登录组件（或者更上层的根组件，比如App.js）中，导入ToastContainer：

import { toast, ToastContainer } from "react-toastify";

然后在组件的JSX渲染区域，添加这个容器。推荐放在登录表单的同级位置：

return (
  <div className="login-page">
    {/* 你的登录表单代码 */}
    <form onSubmit={handleSubmit}>
      {/* 表单输入项、提交按钮等 */}
    </form>
    {/* 添加ToastContainer，这里可以配置全局默认属性 */}
    <ToastContainer 
      draggable={false}
      position={toast.POSITION.TOP_RIGHT}
    />
  </div>
);

把全局通用的配置（比如draggable、position）放在ToastContainer里，之后调用toast.success()或toast.error()时就不用重复写这些属性了。

2. 优化`handleSubmit`的代码（可选但推荐）

你的代码里混用了async/await和.then()，虽然功能正常，但统一写法会让代码更清晰：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    // 用await替代.then()，代码更线性
    const res = await axios.post("/login", { email, password });
    toast.success("login successfully");
    setUser({ ...user, err: "", success: res.data.message });
  } catch (err) {
    // 可选：添加可选链操作符，避免err.response为undefined时报错
    const errorMessage = err.response?.data?.message;
    if (errorMessage) {
      setUser({ ...user, err: errorMessage, success: "" });
      toast.error(errorMessage);
    }
  }
};