无法通过axios设置状态获取请求?

时间:2019-09-05 07:00:55

标签: reactjs parameters get axios

所以我想将我的预订状态设置为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)
  }

当我用控制台登录时,底部的数组将为空。

1 个答案:

答案 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.
      })

  }