如何修复React useState的异步更新问题？

为什么现在输出的是0？ #

React的useState更新是异步批量执行的，目的是减少不必要的组件重渲染。你在handler里调用setState(1)后，React不会立刻更新state的值，当前函数里的state是闭包捕获的更新前的旧值（也就是0），所以立刻console.log只能拿到旧值。

三种解决方法： #

1. 直接存储新状态值（适合新值固定的场景）

如果新状态是确定的，直接把它存在变量里，更新和打印用同一个变量就行：

function Test() {
  const [state, setState] = React.useState(0);

  const handler = () => {
    const newState = 1;
    setState(newState);
    console.log(newState); // 直接打印存储的新值
  }

  return (
    <div>
      <div>My state: {state}</div>
      <button onClick={handler}>Click</button>
    </div>
  );
}

2. 用useEffect监听状态变化（适合状态更新后需要执行后续逻辑的场景）

通过useEffect监听state的变化，当state更新完成、组件重新渲染后，这个钩子会触发，就能拿到最新的状态值：

import React, { useState, useEffect } from 'react';

function Test() {
  const [state, setState] = React.useState(0);

  // 监听state变化，更新后执行
  useEffect(() => {
    console.log(state);
  }, [state]); // 依赖数组里放state，只有state变了才触发

  const handler = () => {
    setState(1);
  }

  return (
    <div>
      <div>My state: {state}</div>
      <button onClick={handler}>Click</button>
    </div>
  );
}

3. 函数式更新中获取新状态（适合新状态基于旧状态计算的场景）

如果新状态是根据旧状态计算出来的（比如累加），可以用setState的函数式写法，在函数内部计算新状态并直接使用：

function Test() {
  const [state, setState] = React.useState(0);

  const handler = () => {
    setState(prevState => {
      const newState = prevState + 1; // 这里基于旧状态计算新值
      console.log(newState); // 直接拿到新状态
      return newState;
    });
  }

  return (
    <div>
      <div>My state: {state}</div>
      <button onClick={handler}>Click</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Alex