Javascript If语句中的React setState

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

当且仅当所选工件的颜色正确时，我想突出显示相应的正方形，因此在我的handleClick（）函数中的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>

{
this.state.gameBoard.map（（对象）=>
{object.map（（object2）=>
this.handleClick（object2.at）}color={（object2.at+Math.floor（object2.at/8））%2==0？“白色”：“黑色”}/>）}
)
}

试试：

handleClick（num）{
this.setState（prevState=>{
返回{
…国家，
所选：num
};
})
}

这里的问题主要是依赖性问题。渲染基于状态的gameboard字段，该字段未被修改。因此，该组件不会重新加载，因为它不知道它还有其他依赖项（已选择）

我建议的最简单、最干净的方法是简单地将map函数移动到具有适当依赖关系的useCallback（或useMemo，两者都可以）中，然后在渲染方法中简单地使用它

const foobar=useCallback（（）=>this.state.gameBoard.map（（object）=>
{object.map（（object2）=>
this.handleClick（object2.at）}color={（object2.at+Math.floor（object2.at/8））%2==0？“白色”：“黑色”}/>）}
)
，[this.state]）
渲染(
{foobar（）}
) 

prevState.gameBoard，prevState.turn仍然保留对旧的内部对象的引用，您需要传播它欢迎使用SO！请共享一个。@Aleks旧对象没有被变异，但是-这不意味着没有必要克隆它吗？@CertainPerformance gameBoard没有变异，但是selected有变异。@KevinTong没有，它看起来像是

selected

是一个数字，原语是不可变的；那里没有什么问题。您正在创建一个新对象，其中包含一些对旧对象的引用，但旧对象没有任何变化。对于可怕的代码格式，我深表歉意，我正在电话中回答这个问题。