React中调用封装的react-toast-notifications toast无显示如何解决

问题原因 #

• 违反React Hook调用规则：useToasts是React Hook，仅允许在React函数组件、自定义Hook的顶层调用，你直接将Error作为普通函数执行Error('success')，无法正确获取Hook上下文，addToast方法根本没有正确初始化。
• 参数接收错误：如果将Error作为组件使用，第一个参数是props对象，你直接写(type)无法正确获取传入的type属性。
• 缺少根上下文包裹：react-toast-notifications要求使用useToasts的组件必须包裹在ToastProvider组件内部，否则无法拿到toast的全局实例。
• 逻辑分支返回值错误：成功分支直接返回addToast的调用结果（非JSX元素），不符合React组件的返回值要求。

解决方法 #

方案：封装为自定义Hook调用（推荐） #

这是最符合React规则的实现方式，步骤如下：

1. 重写原Error组件为自定义Hook：

// 重命名为 useToast.js 更符合语义
import { useToasts } from "react-toast-notifications";

export const useToast = () => {
  const { addToast } = useToasts();

  const showToast = (type) => {
    switch (type) {
      case "success":
        addToast('Saved Successfully', { appearance: 'success' });
        break;
      case "error":
        addToast('Operation failed', { appearance: 'error' });
        break;
      default:
        addToast('System notification', { appearance: 'info' });
    }
  };

  return { showToast };
};

2. 根组件添加ToastProvider包裹：

// App.js
import { ToastProvider } from 'react-toast-notifications';
import Home from './home';

export default function App() {
  return (
    <ToastProvider placement="top-right" autoDismiss autoDismissTimeout={3000}>
      <Home />
    </ToastProvider>
  );
}

3. 在home.js业务组件中调用：

// home.js
import { useToast } from './useToast';

export default function Home() {
  const { showToast } = useToast();

  // 在需要触发toast的时机调用，比如点击事件、接口回调
  const handleSubmit = () => {
    // 提交逻辑...
    showToast('success');
  };

  return <button onClick={handleSubmit}>提交</button>;
}

注意事项 #

不要在非组件/非Hook的普通JS代码中直接调用useToast相关方法，如果需要在工具函数等非组件场景触发toast，可以自定义事件总线传递toast实例，或者直接使用支持全局调用的toast库。

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