React-toastify 复制吐司

Question

我的应用程序中有一个模组页面，只有管理员和管理员才能访问。如果有人试图通过直接键入 URL 来访问它，我有一些逻辑可以重定向他们。

import { useHistory } from "react-router";
import createNotification from "../../../addNotification";
import getRole from "../../../authentication";

const ModHome = () => {
    const history = useHistory();
    const role = getRole();

    if (!["administrator", "moderator"].includes(role)) {
        createNotification("You are not a moderator", "error");
        history.push("/admin-login");
    }

    return (
        <div>
            <h1>Mod page</h1>
        </div>
    )
}

export default ModHome

逻辑运行良好。我被重定向到登录页面，但由于某种原因发生了这种情况

我已经检查过，toasts 有不同的 ID，函数只被调用一次，所以为什么我收到 2 条通知？

更新：这是 createNofication 代码：

import {toast} from "react-toastify";

export default function createNotification(message, type) {
    const options = {
      position: "top-right",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    };
    switch(type) {
      case "success":
        toast.success(message, options);
        break;
      case "warning":
        toast.warn(message, options);
        break;
      case "error":
        toast.error(message, options);
        break;
      case "info":
        toast.info(message, options);
        break;
    }
}

Answer 1

为什么您认为该函数只被调用了一次？运行组件主体中的这个 if 代码将在每次组件呈现或重新呈现时执行，所以我相信这个函数被调用了多次。

如果你用一个 useEffect 和一个空的依赖项数组来包装它，你可能不会再看到重复项。

React-toastify 复制吐司

React-toastify duplicating toast

reactjs

toast

react-toastify