Асинхронная функция опережает setState - PullRequest
Новая
       5

Асинхронная функция опережает setState

1 голос
/ 02 апреля 2020

Я нашел решения для функционального программирования, но мне нужны решения для программирования в классах без использования useEffect.
Код приложения: 

import React from "react";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "hello"
    };
  }

  setText() {
    this.setState({
      text: "new text"
    });
    this.func();
  }

  async func() {
    console.log(this.state.text);
  }

  render() {
    return (
      <div>
        <button onClick={this.setText.bind(this)}>Click</button>
      </div>
    );
  }
}

export default App;

В консоли я вижу «привет». Как выполнить setState, а затем его асинхронную функцию?

1 Ответ

3 голосов
/ 02 апреля 2020

На самом деле, функция setState действует асинхронно, поэтому вы должны использовать обратный вызов setState для вызова функции func: 

setText() {
  this.setState(
    {
      text: "new text",
    }, 
    this.func // callback of setState
  );
}

Затем в консоли вы можете увидеть new text.

...