javascript - 在 React 中使用变量更新状态

Question

我正在尝试解决我的状态未更新的问题。我有一个通过 Axios 调用 NASA api 的函数，该函数运行良好。目前，datePicked 状态默认为空，这意味着 GET 请求默认为当前日期。我要添加生成随机日期的功能(函数 onRandomDateClick)，一切正常。

然后我想用生成的日期更新 datePicked 的状态，然后运行保存 axios 请求的 onImageGet 函数。

初始状态

  class Photo extends Component {
    state = {
      apiUrl: 'XXXXXXXX',
      apiKey: 'XXXXXXXX',
      image: null,
      imgChecked: false,
      datePicked: ""
    };

生成随机日期、记录变量和状态。状态当前显示为空白。 this.setState 不起作用。

    onRandomDateClick = (e) => {
      function randomDate(start, end) {
        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
      }
      let randomDateResult = randomDate(new Date(2012, 0, 1), new Date())
      let datePicked = randomDateResult.toISOString().slice(0,10);
      this.setState({datePicked})
      console.log("variable is " + datePicked);
      console.log("state is " + this.state.datePicked);
      this.onImageGet();
    }

Axios 调用此处带有状态

    onImageGet = e => {
      axios.get(`${this.state.apiUrl}?api_key=${this.state.apiKey}&date=${this.state.datePicked}`)
      //response always starts res.data
          .then(res => {
            const image = res.data;
            this.setState({ image })
          })
          this.setState({imgChecked: true})
    }


    render() {
      ...blah blah...
      return (
        <div className="photo">        

         ... blah blah blah ...
        </div>

      );
    }
  }

Answer 1

Js 正在以异步方式进行 http 调用。因为 React setState 是异步的。你应该这样做。

onRandomDateClick = (e) => {
      function randomDate(start, end) {
        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
      }
      let randomDateResult = randomDate(new Date(2012, 0, 1), new Date())
      let datePicked = randomDateResult.toISOString().slice(0,10);
      this.setState({datePicked},() => {
        this.onImageGet();
      })
    }
    
    onImageGet = e => {
      axios.get(`${this.state.apiUrl}?api_key=${this.state.apiKey}&date=${this.state.datePicked}`)
      //response always starts res.data
          .then(res => {
            const image = res.data;
            this.setState({ image, imgChecked: true })

          })
        
    }
    render() {
      ...blah blah...
      return (
        <div className="photo">        

         ... blah blah blah ...
        </div>

      );
    }
  }