React中布尔状态值无法切换？求问题原因分析

• 你看到两次console.log都输出true，核心原因是React的状态更新是异步的。在changePlayerTurn函数执行的同一个周期里，playerTurn的旧值会被一直保留，直到组件重新渲染。所以哪怕你调用了setPlayerTurn，当前函数里的playerTurn还是初始的true，第二次console.log自然也输出true。

• 你尝试的setPlayerTurn(current => !current)是正确的写法，这种函数式更新能确保基于最新的状态值进行修改，避免闭包导致的旧值问题。但同样，在当前函数执行周期里你依然看不到更新后的状态。

• 要验证状态是否真的切换成功，可以做这两件事：

  1. 在组件的渲染区域直接输出playerTurn，比如<div>{playerTurn.toString()}</div>，组件重新渲染后就能看到最新值。
  2. 用useEffect监听playerTurn的变化，在回调里打印新值：

     useEffect(() => {
       console.log('更新后的playerTurn:', playerTurn);
     }, [playerTurn]);
     

• 另外注意：不要在组件外部直接调用changePlayerTurn，React组件的状态更新应该在组件渲染周期内触发（比如点击事件、useEffect回调里），如果在组件初始化时直接调用，可能会导致不必要的重复渲染甚至逻辑异常。

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