时间戳

首页 > 解决方案 > 如何仅在反应状态发生突变后才进行axios调用？

javascript - 如何仅在反应状态发生突变后才进行axios调用？

问题描述

反应状态值this.state.condition被传递给axioscall ，但this.state.condition仅在第二次尝试执行函数时发生突变generateReport()，因此在第一次尝试执行函数时this.state.condition作为空数组传递给 axios 调用generateReport()。是否有任何解决方法或解决问题的方法？代码如下。

generateReport(){
      this.setState({statusMsg: ""});
      this.setState({loaderInitialStatus:"Processing..."})
      //this.isReq() ?
      console.log('this.state.selectedOption???',this.state.selectedOption); 
      if(this.state.selectedOption && this.state.selectedOption.length > 0) {
        let groups = []
        this.state.selectedOption.map((item) => {
          groups.push(item.value); 
        })
        this.setState(prevState => ({ 
          condition: [...prevState.condition, { name: "readByGroup", operator: "IN  ", value: groups }]
        }))
      }
      console.log('this.state.condition???', this.state.condition);

        this.props.getMetricsByContent(this.state.condition).then((data) => {
          this.setState({isLoader: false});
          if(data && Array.isArray(data) && data.length > 0){
            let csvContent = papa.unparse(data);
            this.download(csvContent, 'metrics.csv', 'text/csv;encoding:utf-8');
            this.setState({statusMsg: "File Downloaded successfully"})
          } else this.setState({statusMsg: "No records to download"})
        })

      //: null;

    }

标签： javascriptreactjsasynchronousaxios

解决方案

出现意外行为的原因是this.setState() 是异步的，不会像预期的那样立即执行。在这种情况下，当一个接一个地调用 setState() 时，不能保证第一个 setState() 在下一个之前执行。此外，react 尝试通过减少虚拟 DOM 重新渲染和查找更改来将最大可能的 setState() 调用组合成一个。

因此，在这种情况下，我们希望操作是同步的，我们可以传递一个回调，该回调将在 setState() 成功后执行。

generateReport(){
    const { selectedOption } = this.state;
    if(selectedOption && selectedOption.length > 0) {
      let groups = []
      selectedOption.map((item) => {
        groups.push(item.value); 
      })
      this.setState(currStaleState => ({
        statusMsg: "", loaderInitialStatus:"Processing...",
        condition: [...currStaleState.condition, { name: "readByGroup", operator: "IN  ", value: groups }]
      }), () => {
        this.props.getMetricsByContent(this.state.condition).then((data) => {
        this.setState({isLoader: false});
        if(data && Array.isArray(data) && data.length > 0){
          let csvContent = papa.unparse(data);
          this.download(csvContent, 'metrics.csv', 'text/csv;encoding:utf-8');
          this.setState({statusMsg: "File Downloaded successfully"})
        } else this.setState({statusMsg: "No records to download"})
      })
      })
    } else {
      console.log('error : no option selected');
    }
}

此外，我合并了所有看起来独立的 setState() 调用。此外，如果没有选择任何内容，您应该有一个 else 条件，以防它没有被处理。因为您的状态将被设置为永远处理，就像之前在第一行中设置的那样。

希望这能解决问题。如有任何问题，请发表评论:)

推荐阅读