Как я мог иметь успешное всплывающее окно?

Question

Моя цель состоит в том, чтобы мое модальное диалоговое окно всплыло при щелчке.Тем не менее, я получаю эту ошибку каждый раз, когда я выполняю:

Неверный вызов ловушки.Хуки могут быть вызваны только внутри тела функционального компонента.Это может произойти по одной из следующих причин:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM)
2. Возможно, вы нарушаете правила хуков
3. Возможно, в одном приложении может быть несколько копий React. См. Fb.me/react-invalid-hook-call для получения советов о том, как отладить и исправить эту проблему

МайУ меня есть какое-то направление, где я иду с этим не так?

import React from 'react';
import { connect } from 'react-redux';
import { myActions } from './actions/my.actions';
import { Modal, Button } from 'react-bootstrap';
class LoadTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            Search: "Search",
            visible: false
        }
        this.doSearch = this.doSearch.bind(this);
        this.handleShow = this.handleShow.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.runstuff = this.runstuff(this);

    }
    componentDidMount() {
        this.props.getstuff() 
            .then((res) => {
                this.setState({
                    data: res.results.response || [], <--IT shows in the error that it breaks here.
                    visible: false
                })
            });
    }

    doSearch(e) {
        const { name, value } = e.target;
        this.setState({ [name]: value });
        console.log("Search");
    }

    handleShow() {
        this.setState({ visible: true });
    }

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

    runstuff() {

    }
    render() {
        const { data, Search } = this.state;  
         return data.length > 0 ? (
            <div className="row row-centered">
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-centered">
                    <div id="Search" className="row col-xs-5 col-lg-2">
                        <div className="form-group">
                            <input className='form-control' type="text" placeholder="Search" name="Search" value={Search} onChange={this.doSearch} autoFocus />
                        </div>
                    </div>
                    <table className="table table-striped">
                        <thead>                            
                            <tr>
                                <td>Name</td>
                                <td>stuff</td>
                                <td>Start</td>
                                <td>End</td>
                                <td>Status</td>
                                <td></td>
                                <td></td>
                            </tr>
                </thead>
                <tbody>
                    {
                        data.map((dt) => {
                            return (
                                <tr>
                                    <td>{dt.name}</td>
                                    <td>{dt.stuff}</td>
                                    <td>{dt.start}</td>
                                    <td>{dt.end}</td>
                                    { dt.status ?
                                        <td>
                                            <div className="alert alert-success" role="alert"></div>
                                        </td>
                                   :                                      
                                        <td>
                                            <div className="alert alert-danger" role="alert"></div>
                                        </td>
                                    }
                                    <td><button type="button" className="btn btn-primary" onClick={this.runStuff}>Run Stufff</button></td>
                                    <td><button type="button" className="btn btn-info" onClick={this.displayLog}><View Stuff</button></td>
                                    <Modal
                                        show={this.state.visible}
                                      onHide={this.handleClose}
                                    >
                                            <Modal.Header closeButton>
                                                <Modal.Title>Run Stuff for Stuff</Modal.Title>
                                            </Modal.Header>
                                            <Modal.Body>
                                                <div>{dt.lotsofstuff}</div>
                                            </Modal.Body>
                                            <Modal.Footer>
                                                <Button
                                                    variant="secondary"
                                                    onClick={this.handleClose}
                                                >
                                                    Close
                        </Button>
                                                <Button variant="primary" onClick={this.handleClose}>
                                                    Download
                        </Button>
                                            </Modal.Footer>
                                    </Modal>                                  
                                </tr>                               
                            );
                        })
                    }
                </tbody>
                    </table>

                </div> 
            </div>
        ) :
            <div className="row">
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <p>No Data to Display at the moment</p>
                </div>
            </div>;
        }
}
function mapStateToProps(state) {



    return {

    };
}
const mapDispatchToProps = dispatch => ({    
    getstuff: () => dispatch(myActions.getstuff())
});
export default connect(mapStateToProps, mapDispatchToProps)(myLoad);