TypeError:对象(.)在使用react时不是一个函数。

Question

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

我已经访问了npm的反应-疲劳主页，他们提供了关于如何使用它的非常好的文档，我相信我已经正确地遵循了来自课程和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 )中的一个bug？

Answer 1

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

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

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

或

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

Answer 2

安装一个较旧版本的react to举，它将工作得很好。

Answer 3

移除未使用的道具。

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