【React】加载页面时，toast会不小心显示两次【react-hot-toast】

2 年 ago
雅, 悟
1 minute

首先

本文介绍了在React项目中，当点击虚拟登录邮箱中的链接后，希望在到达页面后显示完成提示，但遇到了提示通知显示两次的问题，并分享了解决方案。
※这里所说的”提示通知”指的是使用react-hot-toast插件。

错误内容 (wù cuò

错误消息没有出现，但现象是指弹出通知会重复显示两次。

目前已嘗試過的事情

    • コンポーネントの再レンダリングの確認

 

    • 他のコード部分でのtoast関数の呼び出し確認

 

    SSR(Server-Side Rendering)の影響を考慮

造成的原因是什么？

导致了这个结果的因素有哪些？

造成这种情况的原因是什么？

在SSR环境下，客户端和服务器端都执行了关于弹出通知的代码。

解决方案

通过将代码修正为只在客户端执行的方式来解决了这个问题。具体来说，通过将useState和useEffect结合使用，确认在客户端上执行，并显示了Toast。

我觉得没有必要在这里写SSR页面组件部分，因此我并没有提及它。

import React, { useEffect, useState } from 'react';
import toast, { Toaster } from 'react-hot-toast';

const Register: React.FC = () => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // クライアントサイドでのみ実行
    setIsClient(true);

    if (isClient) {
      toast.success('メール認証を行い仮登録が完了しました！');
    }
  }, [isClient]);  // 依存配列に isClient を含める

  return (
    <>
      <Toaster />
      {/* ...他のコード... */}
    </>
  );
};

export default Register;

结果

通过上述修改，已解决了显示两次Toast通知的问题，并且Toast通知现在只在客户端显示。

结束

通过解决这个问题，我学会了在SSR环境中客户端和服务器端代码执行的区别，以及如何结合React的useState和useEffect来解决问题。哦，我明白了！

请参考

    • React公式ドキュメント

 

    react-hot-toast公式ドキュメント
bannerAds