Question

我按照 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 后在一个全新的存储库中完成的。知道我可能做错了什么吗？

Answer 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

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

1 个答案: