React-toastify：调度程序为空并且钩子调用无效

Question

我有一个项目，我尝试实现react-toastify。 为此，我安装了该软件包：

npm install --save react-toastify

按照Github中的示例进行操作：https://github.com/fkhadra/react-toastify

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

应用程序.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import './App.css';
import Login from './components/login'
import Grid from './components/grid'
import Note from './components/note'
import Collab from './components/collab'
import Popup from './components/popup'

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  return (
    <div className="App">
      <div className="App-Header">
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/popup" element={<Popup />} />
          <Route path="/grid" element={<Grid />} />
          <Route path="/note" element={<Note />} />
          <Route path="/collab" element={<Collab />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

popup.jsx

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function Popup(){
  const notify = () => toast("Wow so easy!");
  return (
    <div>
      <button onClick={notify}>Notify!</button>
      <ToastContainer />
    </div>
  );
}

在终端中编译，我没有收到任何错误。在我的浏览器中，我确实得到了多个，只有当我在路线“/popup”时才会发生。

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Uncaught TypeError: dispatcher is null
    useReducer React
    C bundle.js:484188
    k bundle.js:484603
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 24

The above error occurred in the <ToastContainer> component:

../node_modules/react-toastify/dist/react-toastify.esm.mjs/k<@http://localhost:3000/static/js/bundle.js:484603:12
div
Popup
RenderedRoute@http://localhost:3000/static/js/bundle.js:461523:7
Routes@http://localhost:3000/static/js/bundle.js:462154:7
div
div
App
Router@http://localhost:3000/static/js/bundle.js:462096:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:460195:7

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

我确实重新安装了节点模块文件夹，但没有帮助。

我确实删除了 App.js 中的标签，而是添加了一个包含该标签的标签，但没有帮助。

Answer 1

问题已解决

npm uninstall react-toastify react-router-dom
npm install react-toastify@latest react-router-dom@latest