React井字棋游戏玩家得分每次加2而非1的问题求助

问题根源分析 #

1. 获胜后未终止后续逻辑：检测到玩家获胜时，代码未停止执行，继续运行AI落子逻辑。由于setSquares是异步操作，此时squares仍保持玩家获胜状态，AI落子不会破坏玩家的三连，导致useEffect因squares变化再次触发，重复判定玩家获胜并加分。
2. 直接修改状态数组（状态突变）：clickSquare和comp_choose函数中直接引用原状态数组修改，违反React状态不可变原则，引发不可预测的状态更新与重渲染。
3. 状态更新依赖闭包旧值：使用setPlayerWins(playerWins + 1)方式更新得分，依赖闭包中的旧状态值，多次触发时易导致更新不准确。
4. 重置棋盘操作错误：setSquares(empty_squares)传递函数本身而非执行结果，导致squares被设为函数而非空数组，引发后续逻辑异常。

修复步骤 #

1. 获胜后终止后续逻辑 #

在检测到玩家或AI获胜后添加return，阻止后续AI落子代码执行：

if (playerWon) {   
    setPlayerWins(prev => prev + 1);           
    console.log('Player score: ', playerWins)
    setSquares(empty_squares());
    return; // 终止后续逻辑
}
if (compWon) {
    setCompWins(prev => prev + 1);
    setSquares(empty_squares());
    return; // 终止后续逻辑
}

2. 修复状态突变问题 #

修改棋盘状态时先复制原数组，避免直接操作原状态：

• 调整clickSquare函数：

function clickSquare(index) {
    const player_turn = squares.filter(square => square !== null).length % 2 === 0;
    if (player_turn && squares[index] === null) { // 防止点击已填充格子
        let player_square = [...squares]; // 复制原数组
        player_square[index] = 'X';
        setSquares(player_square);
    }
}

• 调整comp_choose函数：

function comp_choose(index) {
    let comp_square = [...squares]; // 复制原数组
    comp_square[index] = 'O';
    setSquares(comp_square);
};

3. 使用函数式更新得分 #

采用函数式更新确保基于最新状态值操作：

// 玩家获胜时
setPlayerWins(prev => prev + 1);
// AI获胜时
setCompWins(prev => prev + 1);

4. 正确重置棋盘 #

调用empty_squares()生成空数组，而非传递函数本身：

setSquares(empty_squares());

额外优化（提升逻辑健壮性） #

修复AI随机索引越界问题，以及平局时的空棋盘判断：

if (comp_turn) {
    const empty_squares_list = squares
        .map((square, index) => square === null ? index : null)
        .filter(val => val !== null);
    // 用Math.floor替代Math.ceil，避免随机数为1时超出数组长度
    const random_square = empty_squares_list[Math.floor(Math.random() * empty_squares_list.length)];
    if (random_square !== undefined) { // 平局时跳过AI落子
        comp_choose(random_square);
    }
}

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