从React Fetch调用组件方法

时间:2019-05-15 13:22:01

标签: javascript reactjs http fetch

我有一个名为Component的{​​{1}}。在那个SeanceManager中,我有一个Component,它使用method向后端请求数据。

fetch

但是在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; 时,我得到了:

this.fetchSeance()

如何在提取过程中调用该方法?

1 个答案:

答案 0 :(得分:2)

您已使用

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

当您应该使用箭头功能使this与外部作用域相同时。

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

再次更改:

}).then(function (data) {

收件人:

}).then((data) => {