从React Fetch调用组件方法

Question

I have a Component called SeanceManager . And in that Component I have a method that requests data from backend using fetch .

class SeanceManager extends React.Component {

    constructor(...args) {
        super(...args);

        this.state = {
            addSeanceModalShow: false,
            seances: [],
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleDeleteUser = this.handleDeleteUser.bind(this);
        this.fetchSeance = this.fetchSeance.bind(this);
    }

    componentDidMount() {
        this.fetchSeance()
    }



    fetchSeance = () => {
        fetch("/seances")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        addSeanceModalShow: false,
                        seances: result
                    });
                    console.log("Fetchime: "+this.state.seances);
                },

                (error) => {
                    this.setState({
                        addSeanceModalShow: true,
                        error
                    });
                }
            )
        console.log("l6pp: "+this.state.seances);
    }

    handleSubmit = (event, devices, interval, startDate, endDate) => {
        event.preventDefault();
        if (devices && interval && startDate && endDate) {
            var data = { devices: devices, interval: interval, startDate: startDate, endDate: endDate };
            fetch('/create', {
                method: 'post',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            }).then(function (response) {
                console.log(response)
                //TODO: Should handle here somehow ?
                // return response;
            }).then(function (data) {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

            // this.fetchSeance();
        }
    };

    handleDeleteUser = id => {
        fetch('/delete/'+id, {
            method: 'delete',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(id)
        }).then(function (response) {
            console.log("Kustumise response");
            console.log(response);
            //TODO: Should handle here somehow ?
            // return response;
        }).then(function (data) {
            // console.log(data);
        });
        this.fetchSeance();
        this.setState({state: this.state});
    };

    render() {
        let addSeanceModalClose = () => this.setState({ addSeanceModalShow: false });

        return (

            <MDBRow>
                <MDBCol className="col d-flex justify-content-center">
                    <MDBCard className="card col-md-6">
                        <MDBCardBody>
                            <div className="add-button-parent">
                                <MDBBtn className="add-button-child" color="cyan"
                                        onClick={() => this.setState({ addSeanceModalShow: true })}>
                                    Lisa uus seanss
                                </MDBBtn>
                            </div>

                            <form>
                                <AddSeanceFormModal
                                    show={this.state.addSeanceModalShow}
                                    handleSubmit={this.handleSubmit}
                                    onHide={addSeanceModalClose}
                                />
                                {/*{this.addToSeanceList()}*/}
                                <div className="card scrollbar-ripe-malinka ">
                                    <div className="row ">
                                        <div className="container-fluid">
                                            <div className="card-body">
                                                <h4 id="section1"><strong>Aktiivsed seansid</strong></h4>
                                                <Seances
                                                    handleDeleteUser={this.handleDeleteUser}
                                                    seances={this.state.seances} />

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </MDBCardBody>
                    </MDBCard>
                </MDBCol>
            </MDBRow>
        );
    }

};

export default SeanceManager;

But when calling method this.fetchSeance() inside of the fetch method I get the:

Unhandled Rejection (TypeError): Cannot read property 'fetchSeance' of undefined

How can I call the method from within the fetch?

Answer 1

You've used

}).then(function (data) {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

when you should have used an arrow function to keep this the same as the outer scope.

}).then((data) => {
                // console.log(data);
                //------------------------Method crashing here-----------
                this.fetchSeance();
               //---------------------------------------------------
            });

Again change:

}).then(function (data) {

to:

}).then((data) => {