Javascript React子组件未从父组件发送更新状态

我试图在他们的官方网站上阅读react教程：

唯一的区别是，我试图通过仅使用功能组件来实现它，以下是我在代码笔上的代码：

参见Sneden Gonsalves（）的笔 在…上

总结；我有一个简单的方块组件，用于绘制单个方块，一个父棋盘组件用于绘制一个3x3方块，一个总体游戏组件用于维护状态，如教程中的历史、当前方块、当前回合等。 我目前将方块从父游戏组件发送到棋盘组件，如下所示：

<Board
   onClick ={(i)=>{handleClick(i)}}
   squares = {state.history[state.history.length - 1]}

{handleClick（i）}
正方形={state.history[state.history.length-1]}

/>

handleClick创建了新的squares状态并将其附加到历史数组中，我假设该数组应该动态传递，因为我也传递了数组中的最后一个条目，但看起来它根本没有将最后一个条目传递给子组件。不知道发生了什么事

谢谢你抽出时间

组件：

正方形：

 const Square = (props)=>{
        return(
            <button className="square" onClick={(e)=>props.onClick()}>
                {props.value}
            </button>
        )
    }

const Square=（道具）=>{
返回(
props.onClick（）}>
{props.value}
)
}

董事会：

const Board = (props) => {
    const renderSquare = (i)=>{
        return <Square
            value={props.squares[i]}
            onClick={() => {
                props.onClick(i)
                }
            }
        />
    }
    return(
        <div>
            <div className="board-row">
                {renderSquare(0)}
                {renderSquare(1)}
                {renderSquare(2)}
            </div>
            <div className="board-row">
                {renderSquare(3)}
                {renderSquare(4)}
                {renderSquare(5)}
            </div>
            <div className="board-row">
                {renderSquare(6)}
                {renderSquare(7)}
                {renderSquare(8)}
            </div>
        </div>
    )
}

const Board=（道具）=>{
const renderSquare=（i）=>{
返回{
道具。onClick（一）
}
}
/>
}
返回(
{renderSquare（0）}
{renderSquare（1）}
{renderSquare（2）}
{renderSquare（3）}
{renderSquare（4）}
{renderSquare（5）}
{renderSquare（6）}
{renderSquare（7）}
{renderSquare（8）}
)
}

游戏：

const游戏=（）=>{
let[state，setState]=useState({
历史：[{
正方形：数组（9）。填充（空）
}],
isXNext：是的，
状态：“下一个玩家X”
});
useffect（（）=>{
const currentSquares=state.history[state.history.length-1].squares；
const winner=calculateWinner（当前平方）；
国际单项体育联合会（优胜者）{
setState（state=>（{…state，status:'Winner is'+Winner，end:true}））；
}
}，[州历史]；
常量handleClick=（i）=>{
const currentSquares=state.history[state.history.length-1].squares；
if（state.end | | currentSquares[i]）
返回；
const newSquares=currentSquares.slice（）；
newSquares[i]=state.isXNext？'X'：'O'；
const newIsXNext=！state.isXNext；
const newHistory=state.history.concat([
{squares:newSquares}]）；
设置状态（状态=>（{…状态，
历史：新历史，
isXNext:newIsXNext，
状态：'Next player'+（newIsXNext？'X'：'O'）
}));
}
返回(
{handleClick（i）}
正方形={state.history[state.history.length-1]}
/>
{state.status}
{/*TODO*/}
);
}

结果是它正在传递更新状态。我没有使用正确的键，我就是这样修复它的：

<Board
    onClick ={(i)=>{handleClick(i)}}
    squares = {state.history[state.history.length - 1].squares}/>

{handleClick（i）}
正方形={state.history[state.history.length-1].squares}/>

工作代码笔：

参见Sneden Gonsalves（）的笔 在…上

---

结果是它正在传递更新状态，我没有使用正确的键，我就是这样修复它的：

<Board
    onClick ={(i)=>{handleClick(i)}}
    squares = {state.history[state.history.length - 1].squares}/>

{handleClick（i）}
正方形={state.history[state.history.length-1].squares}/>

工作代码笔：

参见Sneden Gonsalves（）的笔 在…上