стратегии для повторного отображения компонента один раз на основе нескольких состояний набора() в цепочке методов?

#reactjs

Вопрос:

В моем componentDidMount () мне нужно вызвать несколько специализированных методов. Каждый из этих методов должен вызывать setState в конце метода. Есть ли способ каким-то образом отложить это.setState от выполнения повторного рендеринга компонента до тех пор, пока все методы не будут завершены? Вот некоторый псевдокод, который, надеюсь, иллюстрирует общую концепцию того, что я имею в виду:

 componentDidMount(){
   this.setState.disableRerender();
   this.DoOneThing();
   this.DoSomethingElse();
   this.setState.enableRerender();
}

DoOneThing(){
   //this.setState(...)
}

DoSomethingElse(){
   //this.setState(...) 
}
 

Ответ №1:

Вы можете использовать async/await , чтобы делать то, что вы хотите, а затем setState с результатами :

 async componentDidMount(){
  
  const firstThing = await this.DoOneThing();
  const secondThing = await this.DoSomethingElse();
    
  this.setState({firstThing, secondThing})  
}

DoOneThing(){
  return new Promise((res, rej) => {
    // do the first thing
    res(5)
  })
}

DoSomethingElse(){
  return new Promise((res, rej) => {
    // do the other thing
    res(10)
  })
}