Как я могу дождаться функции hevy в методе компонента реакции с отображением счетчика?

#javascript #reactjs #asynchronous #es6-promise

#язык JavaScript #реагирует на #асинхронный #es6-обещание

Вопрос:

Я хочу показать сообщение «вычисление…» во время синхронного вычисления hevy в методе компонента React.
Вот мой код.
Но это не работает. Я хочу, чтобы реакция вызывала render() как после первого, так и после второго состояния.
Но React вызывает его только после второго заданного состояния.
Как я могу this.state.calculating правильно переключиться?

 // note: this is not async function function myHeavyFunc() {...}  class Foo extends React.Components {  constructor(props) {  super(props);  this.state = {calculating: false}  this.handleXX = this.handleXX.bind(this);  }   handleXX() {  this.setState({calculating: true}, () =gt; { // first setState  new Promise((resolve, reject) =gt; {  const x = myHeavyFunc();  resolve(x);  }).then(x =gt; {  this.setState({calculating: false}); // second setState  });  });  }    render() {  const y = this.state.calculating? lt;pgt;calculating...lt;/pgt; : '';  return (  lt;divgt;  {y}  lt;button onClick={this.handleXX}gt;start calclt;/buttongt;  lt;/divgt;  );  } }

1. Похоже, вам захочется разделить их. Запустите первое заданное состояние, при рендеринге, если вычисление === true, запустите свою функцию.

2. спасибо за комментарий, но это не работает… Похоже, что, несмотря на то, что функция render() вызывается правильно, применение результата рендеринга к dom блокируется выполнением myHeavyFunc. Я замечаю это, пытаясь использовать componentDidUpdate(). Он вызывается после render(), но применяется к реальному dom блокируется…

3. в функциональном компоненте это будет обрабатываться эффектом использования с массивом зависимостей. Функция componentDidUpdate() срабатывает до рисования, поэтому она по-прежнему блокирует dom…

Ответ №1:

После завершения расчета вы должны вернуть переменной состояния «вычисление» значение «false» вместо «true».:

 handleXX() {  this.setState({calculating: true}, () =gt; { // first setState  new Promise((resolve, reject) =gt; {  const x = myHeavyFunc();  resolve(x);  }).then(x =gt; {  this.setState({calculating: false}); // second setState  });  }); }