React中setState后控制台未显示更新状态值，数组更新滞后问题咨询

你遇到的这个情况其实是React里setState的异步批量更新特性在搞鬼，和组件首次渲染没啥关系哦。

当你调用setState的时候，React并不会立刻修改state的值，而是把这次更新操作放进一个更新队列里，等当前事件循环结束后，再批量处理队列里的更新。所以你在调用setState之后马上打印state，拿到的其实还是更新前的旧值——这就解释了为什么你按顺序加1、2、3，打印结果总是滞后一步：

• 第一次点击加1：setState刚触发，state还没更新，打印旧值[]
• 第二次点击加2：第一次的更新刚完成，state变成[1]，此时打印的是这个刚更新完的值
• 第三次点击加3：第二次的更新完成，state变成[1,2]，打印这个值

下面给你两种靠谱的解决办法：

1. 利用setState的回调函数 #

setState支持第二个参数，是一个回调函数，它会在state更新完成、组件重新渲染之后执行。你可以把打印操作放在这个回调里，就能拿到最新的state了：

import { useState } from 'react';

function App() {
  const [numArray, setNumArray] = useState([]);

  const addNumber = (num) => {
    // 推荐用函数式更新，因为新数组依赖旧数组的状态
    setNumArray(prevArray => [...prevArray, num], () => {
      console.log('更新后的数组：', numArray);
    });
  };

  return (
    <div>
      <button onClick={() => addNumber(1)}>加1</button>
      <button onClick={() => addNumber(2)}>加2</button>
      <button onClick={() => addNumber(3)}>加3</button>
    </div>
  );
}

或者你也可以在函数式更新里直接生成新数组并打印，这样更直观：

const addNumber = (num) => {
  setNumArray(prevArray => {
    const newArray = [...prevArray, num];
    console.log('更新后的数组：', newArray);
    return newArray;
  });
};

2. 用useEffect监听state变化 #

如果需要在state更新后执行一些逻辑（不止是打印），可以用useEffect钩子监听numArray的变化，当它更新时自动执行回调：

import { useState, useEffect } from 'react';

function App() {
  const [numArray, setNumArray] = useState([]);

  useEffect(() => {
    console.log('当前最新数组：', numArray);
  }, [numArray]); // 依赖项设为numArray，只有它变化时才触发

  const addNumber = (num) => {
    setNumArray(prevArray => [...prevArray, num]);
  };

  return (
    <div>
      <button onClick={() => addNumber(1)}>加1</button>
      <button onClick={() => addNumber(2)}>加2</button>
      <button onClick={() => addNumber(3)}>加3</button>
    </div>
  );
}

核心记住一点：React的setState是异步的，不要在调用它之后立刻读取state，要通过回调或者useEffect来获取更新后的状态值。

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