在反应16中渲染完成之前正在执行setState回调

时间:2019-07-03 03:43:52

标签: reactjs react-16

我有一段代码

this.setState({ generateGraphTableforPDF: true }, () => {
 this.generatePDFData(true);
 this.setState({ generateGraphTableforPDF: false });
});

此setstate回调在渲染完成之前执行,因此,在dom中没有表,因此生成了空pdf。

我试图删除回调函数,并使用settimeout 0将它们写在componentDidUpdate中。但是问题是在某些情况下这也失败了。

2 个答案:

答案 0 :(得分:0)

在您的代码中,回调函数内部的逻辑不会同步运行。 this.generatePDFData(true)在执行this.setState({ generateGraphTableforPDF: false })

之前没有完成

您的逻辑流程应该看起来像这样,以便在执行下一步之前完成所有过程:

handleChangeOrWhateverFunction = () => {
    this.setState({
       generateGraphTableforPDF: true
    })
}

componentDidUpdate(prevProps, prevState){
   if(this.state.generateGraphTableforPDF && prevState.generateGraphTableforPDF !== this.state.generateGraphTableforPDF){
       this.generatePDFData(true)
   }
}

generatePDFData = (boolean) => {
...pdf generating logic
   this.setState({
      generateGraphTableforPDF: false
   })
}

答案 1 :(得分:0)

您可以这样做

this.setState({ generateGraphTableforPDF: true }, () => {
   this.generatePDFData(true);
});

function generatePDFData(bool){
   //Your logic to generate PDF
   this.setState({ generateGraphTableforPDF: false });
}