React点击按钮向数组添加值异常：首次点击状态未更新

你的代码里状态更新其实已经执行了，只是查看结果的方式不对，核心原因是React状态更新的异步特性和闭包的影响：

1. 状态更新是异步的
   React中useState的更新函数是异步操作，调用setWordArr和setCnt后，当前函数作用域内的cnt和wordArr并不会立刻变成新值，它们依然是当前渲染周期捕获的旧状态值。所以你在getText里直接console.log，打印的始终是更新前的初始值，而非更新后的值。

2. 闭包捕获旧状态值
   getText函数是在组件初始渲染时创建的，它捕获了当时的cnt（0）和wordArr（空数组）。即使你调用了状态更新函数，只要组件还没完成重新渲染，getText里的状态变量依然是旧值。

3. setCnt的写法存在隐患
   你用setCnt(cnt + 1)更新计数，这种写法依赖当前的cnt值。在异步更新场景下，可能会因为闭包捕获旧值导致计数不准确，正确的做法是使用函数式更新，确保拿到最新的前一个状态：

setCnt(prevCnt => prevCnt + 1);

验证状态更新的正确方式 #

要确认状态是否真的更新，可以通过两种方式：

• 在页面上直接渲染状态值，直观查看变化；
• 使用useEffect监听状态变化，在状态更新完成后打印：

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

export function App(props) {
  const [wordArr, setWordArr] = useState([]);
  const [cnt, setCnt] = useState(0);

  // 监听状态变化，更新后打印
  useEffect(() => {
    console.log("更新后的cnt: ", cnt);
    console.log("更新后的wordArr: ", wordArr);
  }, [cnt, wordArr]);

  const getText = text => {
      setWordArr(prevArr => [...prevArr, text]);
      setCnt(prevCnt => prevCnt + 1);
  }

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={(e)=>{getText(e.target.innerText)}}>test</button>
      {/* 页面渲染状态 */}
      <p>当前计数：{cnt}</p>
      <p>数组内容：{wordArr.join(', ')}</p>
    </div>
  );
}

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