如何在React中使用useState实现状态的即时更新

为什么会出现这个问题？ #

React的useState在合成事件、生命周期函数等场景下会批量处理状态更新，调用setState后并不会立刻修改当前作用域内的状态变量，要等到下一次组件渲染完成后，状态才会更新为最新值，所以你在调用setState后立刻打印状态，得到的还是旧值。

解决方法 #

1. 用useEffect监听状态变化

如果需要在状态更新后执行某些逻辑，可以通过useEffect监听目标状态，当状态发生变化时，useEffect的回调会触发，此时能拿到最新的状态值。

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // 监听count变化，状态更新后执行这里的逻辑
  useEffect(() => {
    console.log('当前最新计数:', count);
    // 比如发送请求、更新DOM等操作都可以放在这里
  }, [count]); // 依赖数组里填入要监听的状态

  const handleClick = () => {
    setCount(count + 1);
    // 这里打印的是旧值，因为setState是异步的
    console.log('点击后即时打印:', count);
  };

  return <button onClick={handleClick}>点击计数: {count}</button>;
}

2. 使用函数式更新

当新状态依赖于旧状态时，不要直接用当前的状态变量计算新值，而是给setState传入一个函数。这个函数的参数是React维护的最新旧状态，返回值就是新状态，能确保每次更新都基于最新的状态。

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    // 函数式更新，prevCount是最新的旧状态
    setCount(prevCount => prevCount + 1);
  };

  const handleBatchUpdate = () => {
    // 连续调用多次，也能正确累加
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={handleIncrement}>加1</button>
      <button onClick={handleBatchUpdate}>连续加3</button>
    </div>
  );
}

3. 用useRef同步保存最新状态

如果需要在同步代码里立刻拿到更新后的状态，可以用useRef来同步存储状态值。每次状态更新时，同步更新ref.current的值，这样在任何地方都能通过ref.current获取最新状态。

import { useState, useRef } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  const handleClick = () => {
    // 用函数式更新的同时，同步更新ref的值
    setCount(prev => {
      const newCount = prev + 1;
      countRef.current = newCount;
      return newCount;
    });
    // 这里能立刻拿到最新的状态值
    console.log('点击后的最新计数:', countRef.current);
  };

  return <button onClick={handleClick}>点击计数: {count}</button>;
}

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