React函数式组件开发井字棋：点击方块不更新问题求助

• 核心问题：renderSquare函数中向Square组件传递onClick时，没有把当前方块的索引i传递给handleClick，导致handleClick里的i实际是点击事件对象，而非目标方块的索引，所以无法正确修改对应位置的棋盘数据。

• 修复步骤：

  1. 修改Square组件的点击事件触发逻辑，传递当前方块的索引
  2. 确保handleClick接收正确的索引参数

修改后的关键代码片段：

function renderSquare(i){
    return (
        <Square value={game[i]} onClick={() => handleClick(i)} />
    )
}

完整修复后的代码：

import { useState } from 'react'
import './tiktacktoe.css'
function Square(props) {
    return (
        <div className="square" onClick={props.onClick}>
            {props.value}
        </div>
    )
}
function Board(){
    const [game, setGame] = useState(Array(9).fill(null))
    const [xIsNext, setXIsNext] = useState(true)
    
    function handleClick(i) {
        const dupGame = game.slice()
        if (dupGame[i]) {
            return
        }
        dupGame[i] = xIsNext ? 'X' : 'O'
        setXIsNext(!xIsNext)
        setGame(dupGame)
    }
    function renderSquare(i){
        return (
            <Square value={game[i]} onClick={() => handleClick(i)} />
        )
    }
    
    let board = []
    for (let i = 0; i < 9; i++) {
        board.push(renderSquare(i))
    }
    let status = "Next player: " + (xIsNext ? 'X' : 'O')
    return (
        <div >
            <div>
                {status}
            </div>
            <div className='board'>
                {board}
            </div>
        </div>
    )
}
export function TikTackToe() {
    return (
        <div>
            <Board/>
        </div>
    )
}

• 额外说明：
  • 原代码中使用slice()复制数组是正确的，符合React状态不可变的原则，无需移除
  • 之前尝试把赋值逻辑放进setGame里只更新第一个方块，也是因为索引传递错误导致的，修复索引传递后即可正常工作

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