setState 回调在 React 16 中的渲染完成之前执行答案

【问题标题】：setState callback is executing before render finish in react 16setState 回调在 React 16 中的渲染完成之前执行
【发布时间】：2019-07-03 03:43:52
【问题描述】：

我有一段代码，

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

这个 setstate 回调在渲染完成之前执行，所以在 dom 中没有表，因此生成了空的 pdf。

我尝试删除回调函数并将它们写入 componentDidUpdate 并设置超时 0。但问题是这在某些情况下也会失败。

【问题讨论】：

同时发布您的generatePDFData 功能。

标签： reactjs react-16

【解决方案1】：

你可以这样做，

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

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

【讨论】：

【解决方案2】：

在您的代码中，回调函数内部的逻辑不会同步运行。 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
   })
}

【讨论】：

没有工作 cz 表是在 setState 之后在渲染中创建的（使用子组件）并且它需要更长的时间，直到那时父的 componentDidUpdate 被调用。渲染（）{{this.state.generateGraphTableforPDF？ ( ) : null}} 但是相同的代码在 react15 中运行良好