问题描述：使用 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 (
      

        
类式组件
        
test:{this.state.test}
      
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

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