时间戳

首页 > 解决方案 > 使用 react-toastify 时出错，toast 不查看

javascript - 使用 react-toastify 时出错，toast 不查看

问题描述

我明白了

Uncaught TypeError: Object(...) is not a function at useToastContainer (react-toastify.esm.js?146c:296) at ToastContainer (react-toastify.esm.js?146c:954) at mountIndeterminateComponent (react-dom. development.js?61bb:14563) 在 beginWork (react-dom.development.js?61bb:15063) 在 performUnitOfWork (react-dom.development.js?61bb:17820) 在 workLoop (react-dom.development.js?61bb :17860) 在 HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149) 在 Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199) 在 invokeGuardedCallback (react-dom.development.js?61bb: 256) 在 replayUnitOfWork (react-dom.development.js?61bb:17107)

我的课

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export class ViewAllGraphs extends React.Component {
constructor(props) {
        super(props);

        this.notify = this.notify.bind(this);
    }
    notify() {
        console.log("call notify");
        toast("Wow so easy !");
    }

    addGraph(id) {
        console.log("addGraph");
        console.log(id);
        console.log(toast);
        toast.configure();
        this.notify();
    }

并渲染方法返回

<img onClick={this.addGraph.bind(this, item.id)} src={`data:image/png;base64,${item.image}`} />

我是 js 新手，如何通过单击图像来调用 toast？

我的控制台日志

addGraph ViewAllGraphs.js?5897:52 6011412ff65b72973fc0f495

ViewAllGraphs.js?5897:53//它的 id ƒ toast(content, options) {
return dispatchToast(content, mergeOptions(TYPE.DEFAULT, options)); }

ViewAllGraphs.js?5897:54 调用通知 ViewAllGraphs.js?5897:41

标签： javascriptreactjs

解决方案

您需要记住<ToastContainer />在渲染中包含 。这是一个为您提供的工作代码以及一个沙盒：

import React from "react";
import "./styles.css";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.notify = this.notify.bind(this);
  }
  notify() {
    console.log("call notify");
    toast.success("This is a test success", {
      position: toast.POSITION.TOP_CENTER,
      autoClose: 2000,
      hideProgressBar: true
    });
  }

  render() {
    return (
      <div>
        Click the image
        <br />
        <img onClick={this.notify} src="https://via.placeholder.com/140x100" />
        <ToastContainer />
      </div>
    );
  }
}

推荐阅读