NextJS中react-hot-toast重复弹窗及按钮数字异常问题

问题描述 #

在NextJS应用中集成react-hot-toast时遇到两个异常：

• 触发弹窗（如点击注册按钮）时，会弹出多个重复的toast提示
• 触发按钮旁显示数字，每次点击注册按钮，数字会按弹窗数量同步递增

可能原因 #

• ToastProvider重复挂载：在多个页面/组件中重复引入<Toaster />，导致Toast实例被多次创建，引发重复弹窗和计数异常
• 组件重复渲染触发多次toast调用：注册按钮所在组件因状态变化频繁重渲染，导致toast方法被多次执行
• SSR环境初始化冲突：react-hot-toast在NextJS的SSR/SSG模式下，可能出现客户端重复初始化Toast实例的问题

解决方案 #

1. 全局唯一挂载ToastProvider #

在NextJS根布局文件（如app/layout.tsx）中全局引入<Toaster />，确保整个应用仅存在一个Toast实例：

// app/layout.tsx
import { Toaster } from 'react-hot-toast';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

2. 避免重复调用toast方法 #

使用useCallback包裹按钮点击处理函数，防止组件重渲染时重复创建函数导致多次触发toast：

// 注册组件示例
import { useCallback } from 'react';
import toast from 'react-hot-toast';

export default function RegisterButton() {
  const handleRegister = useCallback(() => {
    // 执行注册逻辑
    toast.success('注册成功');
  }, []);

  return <button onClick={handleRegister}>注册</button>;
}

3. 兼容SSR环境 #

若使用NextJS的SSR/SSG模式，通过动态导入禁用SSR来加载Toaster：

// 动态导入Toaster组件
import dynamic from 'next/dynamic';

const Toaster = dynamic(
  () => import('react-hot-toast').then(mod => mod.Toaster),
  { ssr: false }
);

// 在根布局中使用该动态导入的组件

4. 针对handy仓库的代码检查 #

结合你的仓库结构，重点排查以下点：

• 检查是否在多个页面/组件中重复引入了<Toaster />
• 确认注册按钮的点击事件是否存在重复触发逻辑，比如未使用防抖或useCallback包裹

内容的提问来源于stack exchange，提问作者Gal P