javascript - react 意外的数字呈现

Question

我有以下 React 示例，每次 isShowing 状态为真时，我都试图显示一个成功提示(来自 mdbootstrap 库)。对于 toast，这按预期工作，但按钮旁边会显示一个数字，并在每次单击后递增。这个数字也显示为 App 文件中主 div 的子元素(参见附图和 codesandbox 链接)。提前致谢!

import React, { Component } from "react";
import Nav from "./Navbar";
import Routes from "./Routes";
import Mes from "./Message";
import { Button, toast } from "mdbreact";
import "./App.css";

class App extends Component {
  state = {
    isShowing: false
  };

  handleClick = () => {
    this.setState({
      isShowing: true
    });
  };

  render() {
    return (
      <div className="App">
        <Mes />
        <Button color="primary" onClick={this.handleClick}>
          show Alert{" "}
        </Button>
        {this.state.isShowing ? toast.success("Success message") : ""}
        <Routes />
      </div>
    );
  }
}

export default App;

codesandbox 链接:https://codesandbox.io/s/l2xqplx4rm

Answer 1

您不需要在代码中呈现 toast.success。移除

{this.state.isShowing ? toast.success("Success message") : ""}

在上面的代码示例中，您绑定(bind) toast 的 toast.success 方法响应只是事件的 toast 长度。所以它在那边显示数字。

下面的代码足以在单击按钮时显示 toast。

import React, { Component } from "react";
import Nav from "./Navbar";
import Routes from "./Routes";
import Mes from "./Message";
import { Button, toast } from "mdbreact";
import "./App.css";

class App extends Component {

  handleClick = () => {
     //show toast
     toast.success("Success message");
  };

  render() {
    return (
      <div className="App">
        <Mes />
        <Button color="primary" onClick={this.handleClick}>
          Show Alert
        </Button>
        <Routes />
      </div>
    );
  }
}

export default App;

此处更新code