时间戳

首页 > 解决方案 > 在 If 语句中反应 setState

javascript - 在 If 语句中反应 setState

问题描述

我正在使用 React 制作国际象棋游戏，并且正在尝试编写一个函数来计算选择某个棋子时应突出显示的方格。我将游戏作为一个组件，将每个棋子作为第二个组件，并且国际象棋组件中的按钮在单击时从游戏组件调用一个函数。

当且仅当所选部分是正确的颜色时，我想突出显示适当的方块，因此我在我的 handleClick() 函数的 if 语句中调用了 setState。在 if 语句中阅读setState() 的问题后，我移动了条件，以便 handleClick 函数仅链接到正确颜色的部分。

现在的问题是状态会根据需要更改，但由于某种原因，组件不会重新渲染以反映该更改。有人可以让我知道如何解决这个问题吗？这是我处理点击的代码：


handleClick(num){
    this.setState(prevState => {
        return {
            gameBoard: prevState.gameBoard,
            turn: prevState.turn,
            selected: num
        }
    })
}

这是我创建板的代码：

<div>
    {
        this.state.gameBoard.map((object)=>
            <div className = "board-row"> {object.map((object2) => 
                <Piece key={object2.at} turn = {this.state.turn} selected = {object2.selected} piece = {object2.piece} identifier = {object2.at} onClick = {() => this.handleClick(object2.at)} color = {(object2.at+Math.floor(object2.at/8))%2 === 0?"white":"black"} />)} 
            </div>
        )
    }
</div>

标签： javascriptreactjssetstate

解决方案

尝试：

handleClick(num){
    this.setState(prevState => {
        return {
                ...prevState,
                selected: num
            };
    })
}

推荐阅读