0

我的应用中有一个模组页面，只有版主和管理员才能访问。如果有人试图通过直接输入 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

逻辑工作正常。我被重定向到登录页面，但由于某种原因发生了这种情况 在此处输入图像描述

我已经检查过了，吐司有不同的 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;
    }
}
4

1 回答 1

2

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

如果你useEffect用一个空的依赖数组包装它，你可能会停止看到重复。

于 2021-11-24T15:17:48.183 回答