React-toastify 复制吐司
React-toastify duplicating toast
我的应用程序中有一个模组页面,只有管理员和管理员才能访问。如果有人试图通过直接键入 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;
}
}
为什么您认为该函数只被调用了一次? 运行 组件主体中的这个 if
代码将在每次组件呈现或重新呈现时执行,所以我相信这个函数被调用了多次。
如果你用一个 useEffect
和一个空的依赖项数组来包装它,你可能不会再看到重复项。
我的应用程序中有一个模组页面,只有管理员和管理员才能访问。如果有人试图通过直接键入 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;
}
}
为什么您认为该函数只被调用了一次? 运行 组件主体中的这个 if
代码将在每次组件呈现或重新呈现时执行,所以我相信这个函数被调用了多次。
如果你用一个 useEffect
和一个空的依赖项数组来包装它,你可能不会再看到重复项。