React函数组件中playerSide状态不更新问题及解决方法

我正在使用React开发一个国际象棋网站，核心代码如下：

App组件代码 #

const [playerSide, setPlayerSide] = useState('White');

function switchPlayerSide() {
  console.log('in switch, ' + playerSide);
  setPlayerSide(playerSide === 'Black' ? 'White' : 'Black');
}

// 渲染ChessBoard组件
<ChessBoard playerSide={playerSide} onDropListener={switchPlayerSide}/>

ChessBoard组件代码 #

// 拖动棋子触发的监听函数
function onDragStart(source, piece, position, orientation) {
     console.log(playerSide);

     if (game.current.in_checkmate() || game.current.in_draw())
         return false;

    return piece.charAt(0) === playerSide.charAt(0).toLowerCase() && _getSideToMove() === playerSide;
}

// 落子触发的监听函数
function onDrop(source, target, piece, newPos, oldPos, orientation) {
    // 验证移动是否有效
    let _playerMove = game.current.move({ from: source, to: target, promotion: 'q' });
    if (!_playerMove)
        return 'snapback';

    if (onDropListener)
        onDropListener();
}

异常现象 #

• onDragStart和switchPlayerSide中打印的playerSide始终为'White'
• App和ChessBoard组件顶层打印的playerSide能正确显示初始值'White'及移动后的'Black'
• 已排除setPlayerSide异步执行的影响

这是典型的React闭包陷阱：

1. switchPlayerSide函数在App组件初始渲染时创建，捕获了当时的playerSide值（'White'）。后续App组件重新渲染时，虽然playerSide更新了，但旧的switchPlayerSide函数已经被传递给ChessBoard组件，子组件调用的始终是这个旧函数，所以打印的还是初始值。
2. onDragStart函数如果是在ChessBoard组件挂载时绑定到棋盘实例（比如第三方象棋库），它同样捕获了初始渲染时的playerSideprops值。后续playerSide更新时，该函数没有重新生成并绑定，所以一直使用旧的闭包值。

1. 修复switchPlayerSide函数 #

使用函数式更新获取最新状态，同时用useCallback确保函数随状态更新而刷新：

import { useState, useCallback } from 'react';

const [playerSide, setPlayerSide] = useState('White');

const switchPlayerSide = useCallback(() => {
  // 用函数式更新获取最新状态
  setPlayerSide(prevSide => {
    const newSide = prevSide === 'Black' ? 'White' : 'Black';
    console.log('in switch, new side: ' + newSide);
    return newSide;
  });
}, []); // 依赖为空，因为函数式更新不依赖外部state

这样无论函数何时被调用，都会基于最新的状态值计算新的playerSide，同时useCallback保证当状态更新时，函数会传递给子组件最新的版本。

2. 修复onDragStart函数 #

用useCallback包裹onDragStart，将playerSide和game.current作为依赖，确保当这些值变化时，函数会重新生成：

import { useCallback } from 'react';

const onDragStart = useCallback((source, piece, position, orientation) => {
     console.log(playerSide);

     if (game.current.in_checkmate() || game.current.in_draw())
         return false;

    return piece.charAt(0) === playerSide.charAt(0).toLowerCase() && _getSideToMove() === playerSide;
}, [playerSide, game.current]); // 依赖playerSide和game.current

如果使用的是第三方象棋组件（如react-chessboard），需要确保组件会监听onDragStartprops的变化，自动重新绑定监听。如果组件不支持，可以给ChessBoard组件加一个key，当playerSide变化时强制重新挂载：

<ChessBoard 
  key={playerSide}
  playerSide={playerSide} 
  onDropListener={switchPlayerSide}
/>

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