Toastify 渲染不正确

Question

我创建了一个登录页面来练习我的技能。问题是我在触发 handleSubmit 函数后无法呈现 toast 通知。流程是当“用户”提交登录信息时，会弹出toast通知显示登录成功。

例如在我的代码中

import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

//once the user is verified, toast notification is launched.
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await axios
        .post("/login", {
          email,
          password
        })
        .then((res) => {
          // this part does not work
          // the notification is not rendered
          toast.success("login successfully", {
            draggable: false,
            position: toast.POSITION.TOP_RIGHT
          });
          setUser({
            ...user,
            err: "",
            success: res.data.message
          });
        });
    } catch (err) {
      err.response.data.message &&
        setUser({
          ...user,
          err: err.response.data.message,
          success: ""
        });
      toast.error(err.response.data.message);
    }
  };

有谁知道它调用正确吗？我应该使用哪种方法？？

这是显示我的问题的沙盒链接：https://codesandbox.io/s/quirky-ritchie-1k7p7?file=/src/component/LoginPage.js

需要一些帮助来解决这个问题。非常感谢任何帮助！

Answer 1

您还没有包含用于显示吐司的容器

需要在返回函数中包含这个，如图

return (
    <div className="sign-container">
      <div className="sign-wrapper" id="sign-wrapper">
        <ToastContainer/> // Container for toast message


        //rest code


);