React井字棋useState全局状态异常及修改后无响应求助

问题背景 #

开发井字棋时遇到两个核心问题：

• 初始代码中每个FieldCell组件单独维护check状态，导致每个按钮各自计数，无法实现全局统一的X/O交替落子顺序
• 尝试将状态和点击事件提升到App组件后，按钮点击无响应，也无法设置X/O值

初始代码问题分析 #

原FieldCell组件中，每个实例都有独立的check和value状态，因此每个按钮的落子计数相互独立，无法同步全局的落子顺序，导致X/O交替逻辑失效。

修改后代码的问题 #

1. App组件中直接嵌套FieldRow和FieldCell，但Field组件并未使用children属性，这些嵌套的组件不会被渲染，实际生成的按钮仍未绑定点击事件
2. 使用单个value状态维护所有格子的内容，会导致所有格子显示相同的X/O，不符合井字棋逻辑
3. FieldRow和FieldCell未接收并传递handleClick等props，实际生成的按钮没有绑定点击事件

修正方案 #

通过状态提升+逐层传递props实现全局统一的落子逻辑，同时维护每个格子的独立状态：

修正后的App组件 #

import { useState } from 'react'
import './App.css'
import Field from "./components/Field.jsx";

export default function App() {
    // 初始化3x3棋盘，每个格子初始为空字符串
    const [board, setBoard] = useState(Array(9).fill(''));
    // 全局落子计数，控制X/O交替
    const [check, setCheck] = useState(0);

    const handleCellClick = (index) => {
        // 跳过已有内容的格子，防止重复落子
        if (board[index]) return;
        
        // 复制棋盘数组，避免直接修改原状态
        const newBoard = [...board];
        // 根据当前计数设置X或O
        newBoard[index] = check % 2 === 0 ? 'X' : 'O';
        setBoard(newBoard);
        // 函数式更新计数，避免闭包问题
        setCheck(prevCheck => prevCheck + 1);
    }

    return (
        <Field num_rows={3} board={board} onCellClick={handleCellClick} />
    )
}

修正后的Field组件 #

import FieldRow from "./FieldRow.jsx";

export default function Field({ num_rows, board, onCellClick }) {
    let rows = [];

    for(let i=0; i<num_rows;i++){
        // 计算当前行的起始索引，用于定位格子在board数组中的位置
        const startIndex = i * num_rows;
        rows.push(
            <FieldRow 
                key={i} 
                num_cells={num_rows} 
                startIndex={startIndex}
                board={board}
                onCellClick={onCellClick}
            />
        );
    }

    return (
        <div className="field_wrapper">
            <table className="field_table">
                <tbody>
                    {rows}
                </tbody>
            </table>
        </div>
    );
}

修正后的FieldRow组件 #

import FieldCell from "./FieldCell.jsx";

export default function FieldRow({ num_cells, startIndex, board, onCellClick }) {
    let cells = [];

    for(let i=0; i<num_cells; i+=1) {
        const cellIndex = startIndex + i;
        cells.push(
            <FieldCell 
                key={cellIndex} 
                index={cellIndex}
                value={board[cellIndex]}
                onClick={() => onCellClick(cellIndex)}
            />
        );
    }

    return (
        <tr>
            {cells}
        </tr>
    );
}

修正后的FieldCell组件 #

export default function FieldCell({ value, onClick }) {
    return(
        <td className="field_cell">
            {/* 已落子的按钮禁用，防止重复点击 */}
            <button onClick={onClick} disabled={!!value}>{value}</button>
        </td>
    );
}

核心修正点 #

• 使用数组board维护每个格子的独立状态，替代单个value，确保每个格子显示正确内容
• 全局维护check计数，通过handleCellClick函数统一控制X/O交替逻辑
• 逐层传递board状态和onCellClick事件，确保每个生成的FieldCell都能绑定正确的事件和显示对应值
• 添加按钮禁用逻辑，避免重复落子
• 使用函数式更新setCheck，解决闭包导致的计数更新异常

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