我正在使用ReactJS，遇到了一个问题。 在从axios获得response.data之后，我多次使用setState，以便将所有必需的数据设置为我的状态。 但是，问题是我想要等待所有setstate完成后再继续下一行代码。 我不确定如何做到这一点，因为我知道setState会接受第二个回调函数，但这只针对单个setState。 我试着去寻找诺言，但我不确定如何正确地实现它。
下面是我的代码:
axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
.then(response => {
this.setState({ data: response.data });
let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
let rangeEnd = response.data[response.data.length - 1].date
this.setState({ start: rangeStart })
this.setState({ end: rangeEnd })
// execute next line of code here only after all setState above are finished
})
感谢所有的帮助！
您可以同时设置多个内容，如下所示:
this.setState（{start:rangeStart，End:rangeEnd}）
还可以在setstate中使用回调来执行状态设置后的操作
this.setState({
start: rangeStart,
},() => {
console.log('you can do something else here after you set state');
});
setState方法接受第二个参数，这是一个回调，一旦更新状态就会执行该回调。
axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
.then(response => {
let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
let rangeEnd = response.data[response.data.length - 1].date
// also you should combine state updates together
this.setState({ data: response.data, start: rangeStart, end: rangeEnd }, () => console.log('state was updated'));
// execute next line of code here only after all setState above are finished
})
试试这个也许会对你有帮助
axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
.then(response => {
this.setState({ data: response.data });
let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
let rangeEnd = response.data[response.data.length - 1].date
this.setState({ start: rangeStart })
this.setState({ end: rangeEnd })
return response
}).then((response)=>{
// execute next line of code here
});
