在React.js中使用react-toastify出现Invalid Hook Call错误如何解决

• 核查Hook调用位置是否合规：React Hook 仅允许在函数组件、自定义Hook的顶层作用域调用，如果你调用了react-toastify提供的useToast Hook，要确认没有在类组件、普通JS函数、异步回调（setTimeout/接口请求回调）、事件回调内部、条件判断/循环语句中调用该Hook。如果只是需要弹出提示，直接使用toast()方法即可，无需调用useToast Hook，该方法可以在任意上下文直接使用。
• 排查React多实例冲突：项目内存在多份React实例是该报错的常见诱因，可执行命令npm ls react（yarn环境执行yarn list react）检查依赖树中的React版本，如果存在多个版本，统一所有依赖声明的React版本后重新安装依赖即可解决。
• 核查react-toastify使用方式是否正确：
  基础无Hook用法示例如下：

  // 项目入口文件（如App.jsx/main.jsx）先导入依赖和样式
  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App() {
    const showToast = () => toast("提示内容");
    return (
      <div>
        <button onClick={showToast}>触发提示</button>
        {/* ToastContainer必须放置在根组件树内部 */}
        <ToastContainer />
      </div>
    );
  }
  

  如果需要使用useToast Hook，必须遵循Hook调用规则：

  import { useToast } from 'react-toastify';
  
  function DemoComponent() {
    // 正确：函数组件顶层调用Hook
    const { toast } = useToast();
    const handleClick = () => toast("操作成功");
    return <button onClick={handleClick}>提交</button>
  }
  

• 核查ToastContainer组件是否正确挂载：该组件必须渲染在React根组件树内部，不能在非React组件上下文调用渲染。

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