TypeError: Object(...) is not a function when using 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";

我只是简单地调用测试 toast，如下所示：

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

删除未使用的道具。

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

或者使用函数道具

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

然后在箭头函数中调用你的函数。

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

Answer 2

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

此外，如果您学习一些课程，他们通常会提供一些资源供您继续学习，当您开始使用这些资源并为其依赖项执行 npm i 时，它会安装 [=24] 中指定的某些版本的软件包=] 文件，因此如果您在课程中尝试安装新包，它可能与资源文件中提到的包不兼容。

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

或

尝试将 react-toastify 的版本恢复到较早的版本，也许可以尝试使用 react-toastify@4.1 或课程中提到的版本。（这对我有用）

Answer 3

安装旧版本的 react-toastify，它将正常工作

Answer 4

对我有用的是创建另一个文件来保存 <ToastContainer/> 然后将其导入我的 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;

./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;

但是，我的应用程序有点复杂，基本上我有一个文件 httpServices.js，我在其中使用 Axios 库发出 HTTP 请求并捕获错误。因此，如果我在发送 Http 请求时遇到错误并且我正在使用“toast.error(“Message”)”。我正在使用新文件 toast.jsx 来保存错误的容器，我将这个容器导入到我的 App.js.

TypeError: Object(...) is not a function when using react-toastify

TypeError: Object(...) is not a function when using react-toastify

reactjs

react-toastify