обратный вызов setState выполняется до окончания рендеринга в реакции 16

Question

У меня есть кусок кода,

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

Этот обратный вызов заданного состояния выполняется до окончания рендеринга, поэтому в DOM нет таблицы, поэтому генерируется пустой pdf.

Я попытался удалитьВызвать функцию и записать их в componentDidUpdate с settimeout 0. Но проблема в том, что в некоторых сценариях это тоже не получается.

Answer 1

Вы можете сделать это,

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

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

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