React-notification-component 一直显示 TypeError: this.add is not a function答案

【问题标题】：React-notification-component keeps showing TypeError: this.add is not a functionReact-notification-component 一直显示 TypeError: this.add is not a function
【发布时间】：2021-06-30 00:57:35
【问题描述】：

我按照 react-notifications-component 的 NPM 页面上的步骤操作，但我不断收到“TypeError：this.add is not a function”。

步骤：

使用npm install react-notifications-component安装。
使用 npm install animate.css 安装 animate.css。
导入 react-notifications-component 和 store。

import ReactNotification, { store } from "react-notifications-component";
import "react-notifications-component/dist/theme.css";
import "animate.css/animate.min.css";

在我的 App.js 渲染中包含 <ReactNotification />。

function App() {
  return (
    <div className="App">
      <ReactNotification />
    </div>
  );
}

然后在返回 JSX 之前调用 store.addNotification()，与 NPM 页面上写的完全一样。

store.addNotification({
  title: "Wonderful!",
  message: "teodosii@react-notifications-component",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animate__animated", "animate__fadeIn"],
  animationOut: ["animate__animated", "animate__fadeOut"],
  dismiss: {
    duration: 5000,
    onScreen: true
  }
});

但是，我只是不断收到TypeError: this.add is not a function

TypeError: this.add is not a function
Store.addNotification
src/store/index.ts:49
  46 |      this.types,
  47 |      this.defaultNotificationWidth
  48 |    );
> 49 |    return this.add(parsedNotification);
     | ^  50 |  }
  51 | 
  52 |  public getCounter = () => this.counter;
View compiled

这一切都是在运行 npx create-react-app 之后在一个全新的 repo 中完成的。知道我可能做错了什么吗？

【问题讨论】：

@lawrence-witt 谢谢，src/store/index.ts 来自react-notification-component 库，完整文件可以从这里的repo 获得：github.com/teodosii/react-notifications-component/blob/master/…
我遇到了同样的问题。你设法解决了这个问题吗？
@Marco 不幸的是没有，但我切换到react-notifications 这基本上是一样的。

标签： reactjs

【解决方案1】：

可能与您无关，因为您已切换到另一个包，但对于任何被卡住的人：首先在您的 app.js 中使用导入，并确保您正在沿着您调用它的任何组件呈现它

import React from 'react'
import './App.css';
import TestDashboard from './components/Dashboard';
import ReactNotification from 'react-notifications-component'
import 'react-notifications-component/dist/theme.css'

function App() {
  return (
    <div className="App">
        <ReactNotification />
        <Dashboard />
    </div>
  )
}

export default App;

如果您使用next，请检查您是否已将其如上所示放在_app.js中

然后您从仪表板或任何子组件调用通知，以便它正确显示。还要确保你在运行之前已经运行了npm run build:library:dev

【讨论】：