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 (类式组件
test:{this.state.test}
);}
}
此组件渲染后页面上的内容为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 (类式组件
test:{this.state.test}
);}
}
- 上面的代码在 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 (函数式组件
{test}
);
}
我们使用 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 (函数式组件
{test}
);
}ahooks 官方文档：https://ahooks.js.org/zh-CN/