无法在反应中创建警报

Question

我正在尝试在React应用程序（前端React和后端Java）中发出警报。成功删除后，警报应该可见。我找到了这个tutorial，然后运行以下命令“ npm install --save reactstrap react react-dom” 但是很遗憾，我没有看到任何警告消息。 我的代码是：

import React from 'react';
import logo from '../images/logo.svg';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {Button} from 'react-bootstrap';
import { Alert } from 'reactstrap';

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            beers: [],
            visible: false
        };

        this.onDismiss = this.onDismiss.bind(this);
    }

    onDismiss() {
        this.setState({ visible: false });
    }

    componentDidMount() {
        this.loadBeersFromServer();
    }

    loadBeersFromServer() {
        fetch('http://localhost:8084/api/good-beers', {
            method: 'GET'
        })
            .then((response) => response.json())
            .then((beers) => {
                this.setState({
                    beers: beers
                });
            });
    };

    deleteItem(row) {
        const id = row.id;
        fetch('http://localhost:8084/api/good-beers/' + id,
            {method: 'GET'}).then(
            () => this.loadBeersFromServer(),
            this.setState({visible: true})
        ).catch(function () {
            console.log("error");
        });
    }

    cellButton(cell, row) {
        return (
            <Button
                type="button" bsStyle="danger"
                onClick={() =>
                    this.deleteItem(row)}>Delete</Button>
        )
    }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo"/>
                    <h1 className="App-title">Wellcome to React</h1>
                </header>

                <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
                    I am an alert and I can be dismissed!
                </Alert>

                <BootstrapTable data={this.state.beers} options={{noDataText: 'Zatím nebyl vložen žádný záznam'}}
                                version='4' striped={true} hover={true}>
                    <TableHeaderColumn dataField='id' isKey={true} dataSort width='20%'>ID</TableHeaderColumn>
                    <TableHeaderColumn dataField='name' dataSort>Pivo</TableHeaderColumn>
                    <TableHeaderColumn dataField='button' dataFormat={this.cellButton.bind(this)} width='10%'/>
                </BootstrapTable>

            </div>
        );
    }
}

export default App;

能帮我吗？如何解决这个问题。谢谢