Reactjs TypeError:使用react toastify时，对象（…）不是函数

我正在尝试让

对
做出反应，以便在我正在编写的应用程序中工作，同时学习在线课程。我应该安装一个特定的版本，但我总是喜欢使用最新的版本，但当我这样做时，我会得到一堆错误

我已经访问了npm的主页，他们提供了关于如何使用它的非常好的文档，我相信我已经按照课程中的说明进行了操作，并且正确地做出了反应，但是我仍然得到了一个错误

我已经将
react to astify
定义为我的App.js的顶部

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

我只是简单地称之为测试祝酒辞，如下所示：

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

在我的渲染方法中，我有
：

实际上，我刚刚注意到我的
在我的render方法中被注释掉了，当我第二次取消注释它时，页面加载时同样的错误立即发生

我是否遗漏了一些东西，或者这是我正在使用的
react notify
和
react
版本（即16.4.1）的错误？
删除未使用的道具

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

或者使用功能道具

handleDelete = (post) => {
    toast(post);
}

并在arrow函数中调用您的函数

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

render（）{
返回(
{this.handleDelete（'deleted'）}>
删除
)
我也面临着类似的问题，这是因为在较新的版本中，react-toastify与其前身存在一些相互冲突的依赖关系

此外，如果您学习了一些课程，他们通常会提供一些资源，当您开始使用这些资源并对其依赖项执行npm i时，它会安装package.json文件中指定的包的某些版本，因此，如果您试图在课程中安装一个新软件包，它可能与资源文件中提到的软件包不兼容


因此，为了避免冲突，您可以使用最新版本手动安装package.json中提到的所有包，然后安装最新版本的react toastify

或


尝试将react toastify的版本还原为早期版本，可能尝试使用react-toastify@4.1或课程中提到的版本。（这对我有用）
安装旧版本的react toastify，它就可以正常工作了
对我来说，有效的方法是创建另一个文件来保存
，然后将其导入我的App.js中，它就可以正常工作了。这里我给大家举一个简单的例子：

/src/toast.jsx

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

const Toast = () => {
  const errorMessage = () => {
    toast.error("Unexpected error occured");
  };
  return (
    <div>
      <button onClick={errorMessage} className="btn btn-primary">
        Submit
      </button>
      <ToastContainer />
    </div>
  );
};

export default Toast;

从“React”导入React；
从“react toastify”导入{ToastContainer，toast}；
导入“react-toastify/dist/react-toastify.css”；
常数吐司=（）=>{
常量错误消息=（）=>{
toast.error（“发生意外错误”）；
};
返回(
提交
);
};
导出默认吐司；

/src/App.js

import React, { Component } from "react";
import "./App.css";
import Toast from "./toast";

class App extends Component {
  state = {
  };

  render() {
    return (
      <React.Fragment>
        //Your code...
        <Toast />
      </React.Fragment>
    );
  }
}

export default App;

import React，{Component}来自“React”；
导入“/App.css”；
从“/Toast”导入Toast；
类应用程序扩展组件{
状态={
};
render（）{
返回(
//你的代码。。。
);
}
}
导出默认应用程序；

然而，我的应用程序稍微复杂一点，基本上我有一个文件httpServices.js，在这里我使用Axios库发出HTTP请求并捕获错误。因此，如果我在发送Http请求时发现一个错误，并且我正在使用“toast.error（“Message”）”。我正在使用新文件toast.jsx来保存一个错误容器，我在App.js中导入了这个容器。
就像你说的，可能是版本冲突
useReducer
（触发错误）是一个react钩子，在16.4版本中，钩子没有被释放，这很可能是问题所在。谢谢，我稍后会试试，但我觉得你的建议没有意义。如果我只想在某个操作发生时显示一条消息，即删除、添加等，为什么我要将我的“post”对象传递给toast。。。例如不通过我的“职位”对象该函数根本不是一个解决方案，因为我需要在函数本身中操作对象，例如，将其发布到web服务。我最终按照您的建议被降级，即npm-I react-toastify@4.1而不是使用最新版本，并且一切正常。npm安装--保存-toastify@4.5.2帮助me、5、6、7版本不起作用我如何删除
node_modules/
和
package lock.json
（或任何锁文件），然后再次安装
npm
，以重新安装从scratched开始的所有内容对我来说都有效
import React from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const Toast = () => {
  const errorMessage = () => {
    toast.error("Unexpected error occured");
  };
  return (
    <div>
      <button onClick={errorMessage} className="btn btn-primary">
        Submit
      </button>
      <ToastContainer />
    </div>
  );
};

export default Toast;

import React, { Component } from "react";
import "./App.css";
import Toast from "./toast";

class App extends Component {
  state = {
  };

  render() {
    return (
      <React.Fragment>
        //Your code...
        <Toast />
      </React.Fragment>
    );
  }
}

export default App;