我有一个名为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()
如何在提取过程中调用该方法?
答案 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) => {