состояние сразу доступно, когда setState вызывается после await - PullRequest
Новая
       12

состояние сразу доступно, когда setState вызывается после await

9 голосов
/ 12 апреля 2019

При вызове setState после ожидания другой функции и регистрации состояния на консоли - значение сразу доступно.

Я знаю, что setState асинхронный и во всех других случаях он не будет доступен сразупосле вызова (но будет доступно в обратном вызове setState)

При использовании без ожидания (ожидается) 

// inital value state is 0
const response = fetchSomething()
this.setState({
  value: 5
})

console.log(this.state.value) // prints 0

Используется с ожиданием 

// inital value state is 0
const response = await fetchSomething()
this.setState({
  value: 5
})

console.log(this.state.value) // prints 5

Что яздесь не хватает?

1 Ответ

5 голосов
/ 12 апреля 2019

Когда вы создаете функцию async и вы await выражаете какое-то выражение, после выполнения ожидаемого обещания будут выполняться следующие операторы.

В документации говорится, что setState() не всегда немедленно обновляет компонент , и обычно это не происходит, но в этом случае, когда вы обновляете состояние после того, как обещание было разрешено в обработчике события, состояние обновляется немедленно.

Пример 

class App extends React.Component {
  state = {
    value: 0
  };

  asyncClick = () => {
    Promise.resolve().then(() => {
      this.setState({
        value: 5
      });

      console.log(this.state.value);
    });
  };

  syncClick = () => {
    this.setState({
      value: 5
    });

    console.log(this.state.value);
  };

  render() {
    return (
      <div>
        <div>{this.state.value}</div>
        <button onClick={this.asyncClick}>Async click</button>
        <button onClick={this.syncClick}>Sync click</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
...