react setState异步操作数据的问题

问题描述：使用 setState 或 setXXX 修改状态之后，我们去使用数据时发现数据并没有发生更新。

类式组件中 setState 的异步问题

问题描述

在开始我们深入研究的问题前，请先看这一段 react 类式组件的代码：

import React, { Component } from "react";

class index extends Component {
  state = {
    test: 0,
  };

  componentDidMount() {
    console.log("before setState:", this.state.test);
    this.setState({ test: 1 });
    console.log("after setState:", this.state.test);
  }

  render() {
    console.log("render:", this.state.test);
    return (
      <div>
        <h1>类式组件</h1>
        <h2>test:{this.state.test}</h2>
      </div>
    );
  }
}

此组件渲染后页面上的内容为test:1，说明setState 的确修改了状态 test。

我们将目光移到控制台输出，控制台中将会有以下输出：