如何防止在功能组件中重复反应？

Question

当我使用反应式时，它总是像图像一样重复。 如何防止重复？ 像这样

    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

至于我们没有问题的全部情况，我建议您注意这2件事：

• 屏幕截图上的错误消息与您已将其传递给toast.error不同。那么，也许在其他地方重复吐司？
• 您可以检查react tostify的文档（如果您使用此库），他们有一个有关此问题的部分： https://fkhadra.github.io/react-toastify/prevent-duplatiic 。通常提供Toast-ID解决问题。

如果对您无济于事，请提供更多详细信息（当您在页面上有2个吐司时，API部分，parent consonent时，使用登录）