TypeError: Object(...) 不是使用 react-toastify 时的函数

Question

我正在尝试react-toastify在学习在线课程时使用我正在编写的应用程序。我应该安装一个特定的版本，但我总是更喜欢使用最新的版本，但是当我这样做时，我收到了一堆错误。

我去npm了React-Toastify 的主页，他们提供了关于如何使用它的非常好的文档，我相信我已经按照课程和react-toastify正确，但我仍然得到一个错误。

我已经定义react-toastify为我的 App.js 的顶部

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

我只是按如下方式调用测试吐司：

handleDelete = (post) => {
    toast("deleted");
    // toast.error("deleted");       
}

在我的渲染方法中，我有<ToastContainer />：

render() {
    return (
       <React.Fragment>
       <ToastContainer />
       <button className="btn btn-error" onClick={this.handleDelete}>
          Delete
       </button>

当我点击我的删除按钮时，我收到一个错误（好吧，我实际上得到了一堆，但这是主要的）：

TypeError: Object(...) is not a function
useToastContainer
..myapp/node_modules/react-toastify/dist/react-toastify.esm.js:866
  863 | }
  864 | 
  865 | function useToastContainer(props) {
> 866 |   var _useReducer = useReducer(function (x) {
  867 |     return x + 1;
  868 |   }, 0),
  869 |       forceUpdate = _useReducer[1];

实际上，我刚刚注意到我<ToastContainer />在渲染方法中被注释掉了，第二次取消注释时，在我的页面加载时立即发生了同样的错误。

我是不是遗漏了什么，或者这是我使用react-notify的版本的错误，React即 16.4.1？

Answer 1

我也遇到了类似的问题，这是因为在较新版本中与 react-toastify 相对于其前身存在一些相互冲突的依赖关系。

此外，如果您学习某些课程，它们通常会提供一些资源来继续学习，当您开始处理这些资源并为其依赖项执行 npm i 时，它会安装 package.json 文件中指定的某些版本的包，因此如果您正在尝试安装一个新包作为课程的一部分，它可能与资源文件中提到的那些不兼容。

• 所以为了避免这里的冲突，你可以手动安装 package.json 中提到的所有包的最新版本，然后安装最新版本的 react-toastify

或者

• 尝试将 react-toastify 的版本恢复到早期版本，或者尝试使用 react-toastify@4.1 或课程中提到的版本。（这对我有用）