如何防止功能组件中的React toast重复?

Question

当我使用React-Toast它总是像图像一样复制。如何防止重复?像这样的吐司复制

const Login = () => {
// ========= Loading ============
if (loading) {
return <Loading />;
}
// ========= Error ============
if (error) {
if (error.code === "auth/user-not-found") {
toast.error("User Not Found !");
} else if (error.code === "auth/wrong-password") {
toast.error("Password is Wrong !. ");
}
}
if (user) {return <></>}
};
export default Login;

Answer 1

既然我们还没有完全了解这个问题，我建议你注意以下两点:

• 屏幕截图上的错误信息与您传递给toast.error的错误信息不同。所以也许吐司在其他地方是重复的?
• 你可以查看React Tostify的文档(如果你正在使用这个库)，他们有一个关于这个问题的部分:https://fkhadra.github.io/react-toastify/prevent-duplicate。通常提供toast-id可以解决这个问题。

如果没有帮助，请提供更多详细信息(当页面上有2个toast, api部分，使用Login的父组件时)