时间戳

首页 > 解决方案 > 无法使用 axios get 请求设置状态？

reactjs - 无法使用 axios get 请求设置状态？

问题描述

所以我想将我的预订状态设置为我的 result.data，请求正在运行，我可以 console.log(result.data)。但是，当我尝试设置状态然后检查该状态时，它是空的。到底是怎么回事？它与我传递给 axios 的参数有关吗？

我的初始状态如下： this.state = {bookingArrayByDate: []}

尝试将状态设置在“then”之外，但这也不起作用

  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)
  }

当我控制台记录它时，底部的数组将为空。

标签： reactjsparametersgetaxios

解决方案

你的代码很好。您正在经历的是标准的异步行为this.setState()。当您console.log()您的state时，不能保证它在您setState()和console.log()执行之间的时间内更新。

事实上，它几乎 100% 不可能在那段时间内被更改，因为 React 实际上是setState()通过将请求放入队列中来批处理请求，直到整个事件完成。在您的情况下，直到逻辑完成setState()后才会真正发生。componentDidMount()

您可以做的是将回调作为第二个参数传递给this.setState()，该回调在完成更新后直接执行state，从而确保您正在打印更新的state.

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

  }

推荐阅读