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

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

我已经去了 React-Toastify 的npm主页，他们提供了有关如何使用它的非常好的文档，我相信我已经正确遵循了课程和react-toastify的说明，但我仍然收到错误。

我已将react-toastify定义为应用的顶部.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(的错误？

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

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

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

或

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

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

移除未使用的道具。

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>
)

对我有用的是创建另一个文件来保存<ToastContainer/>，然后将其导入我的应用程序中.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("消息"("。我正在使用新文件 toast.jsx 来保存错误的容器，并将此容器导入我的 App.js。

相关内容

最新更新

热门标签：