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

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

render:0
before setState:0
after setState:0
render:1

怎么样？是否和你预期的结果一样？如果不一样你可就应该好好看一看这篇文章了。

问题分析

以上这个问题就是因为上面的setState中修改状态 test 是异步操作，所以在 setState 之后立马读取状态 test 得到的还是修改之前的状态 test:0。等到异步操作执行，状态被修改为 test:1 之后，setState 内部会调用 render 使得页面更新，所以 render 之后就可以读取到更新的状态 test:1。

所以在平时使用 setState 之后我们需要立马使用更改后的状态，当出现上面这种异步的情况时，我们就无法读取到更新后的状态。

问题解决

解决方案一：既然 setState 是异步执行的，那么我们就使用 await 处理这个异步任务。（仅需要修改上面代码的 componentDidMount 即可）

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

使用 await 等待异步的 setState 更新状态完成之后再去执行下面的代码。

解决方案二：我们使用componentDidUpdate 钩子，当数据更新后再去操作数据。

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

setState 到底是同步还是异步？

在最新版本的 React18 中，所有的 setState 都是异步操作。

在 React17 以及之前的版本：

• 当 setState 写在可以被 React 控制的地方，属于异步操作。
• 当 setState 写在不被 React 控制的地方，属于同步操作。如 setTimeout 就不属于 React，setState 运行在其中时是同步操作。

对于这些版本区别，请看如下代码。

class index0 extends Component {state = {test: 0,};componentDidMount() {console.log("before setState:", this.state.test);setTimeout(() => {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>);}
}

• 上面的代码在 React17 及以前的版本，由于 setTimeout 不是 React 的方法，所以其中的 setState 将会同步执行，在控制台输出以下信息：

before setState:0
after setState:1

• 如果在最新版本 React18 中，setState 就是以异步执行的，将会输出以下信息：

before setState:0
after setState:0

函数式组件处理 useState 的异步问题

在 useState 中的 setXXX 方法是异步对数据进行修改的，但是 await 对其无效。

因此我们只能在更新完成后对更新的数据进行操作。

import React from "react";function index2() {const [test, setTest] = React.useState(0);React.useEffect(() => {console.log("before change:", test);setTest(1);}, []);React.useEffect(() => {if (test !== 0) {console.log("after change:", test);}}, [test]);return (<div><h1>函数式组件</h1><h2>{test}</h2></div>);
}

我们使用 useEffect 监听 test，由于这个在第一次 mount 的时候后之后更新都会被触发，所以我们需要判断 test 不是初始值时，然后对更新后的数据进行操作。

当然我们也可以使用第三方库 ahooks 中的 useUpdateEffect，这个钩子忽略了第一次 mount 只在更新后触发。

import React from "react";
import { useUpdateEffect } from "ahooks";function index2() {const [test, setTest] = React.useState(0);React.useEffect(() => {console.log("before change:", test);setTest(1);}, []);useUpdateEffect(() => {console.log("after change:", test);});return (<div><h1>函数式组件</h1><h2>{test}</h2></div>);
}

ahooks 官方文档：https://ahooks.js.org/zh-CN/