反应意外的数字呈现

Question

我有以下 React 示例，我试图在每次 isShowing 状态为 true 时显示成功消息（来自 mdbootstrap 库）。对于 toast，这按预期工作，但按钮旁边会显示一个数字，并在每次单击后递增。此数字还显示为 App 文件中主要 div 的子代（请参阅附图和代码框 link）。提前致谢！

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 link : https://codesandbox.io/s/l2xqplx4rm

Answer 1

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

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

在上面的代码示例中，您绑定 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

反应意外的数字呈现

React unexpected number rendered

javascript

reactjs

mdbreact