所以我想将我的预订状态设置为result.data,请求正在运行,我可以console.log(result.data)。但是,当我尝试设置状态然后检查该状态时,它为空。 到底是怎么回事?与传递给axios的参数有关吗?
我的初始状态如下:this.state = {bookingArrayByDate:[]}
试图将状态设置为“然后”,但是那也不起作用
componentDidMount() {
let today = moment(new Date())
let dateToSend = today.format('YYYY-MM-DD')
axios
.get(
`http://localhost:8888/booking-backend/fetch-reservation.php/`,
{ params: { res_date: dateToSend } }
)
.then((result: any) => {
console.log(result.data)
this.setState({
bookingArrayByDate: result.data
})
})
console.log('this is outside', this.state.bookingArrayByDate)
}
当我用控制台登录时,底部的数组将为空。
答案 0 :(得分:3)
您的代码很好。您正在体验的是this.setState()
的标准异步行为。当您console.log()
state
时,不能保证在setState()
和console.log()
执行之间的时间对其进行了更新。
事实上,它几乎不可能100%在这段时间内被更改,因为React实际上是通过将setState()
请求放入队列中直到整个事件完成来批量处理setState()
请求。就您而言,componentDidMount()
直到this.setState()
逻辑完成之后才真正发生。
您可以做的是将回调作为第二个参数传递给state
,该回调将在state
完成更新后立即执行,从而确保您打印更新的{ {1}}。
componentDidMount() {
let today = moment(new Date())
let dateToSend = today.format('YYYY-MM-DD')
axios
.get(
`http://localhost:8888/booking-backend/fetch-reservation.php/`,
{ params: { res_date: dateToSend } }
)
.then((result: any) => {
this.setState({
bookingArrayByDate: result.data
}, () => console.log(this.state.bookingArrayByDate)) <-- you can swap this whatever function you need.
})
}