我是React的初学者,试图制作纸牌游戏应用(使用'react-dnd'进行拖放功能)。
此应用的board
状态(放置卡片的状态)为4x4网格,存储为2d数组
(初始示例被截断)
this.state = {
board: [
[null, null, null, null],
[null, null, null, null],
[null, null, null, null],
[null, null, null, null]
]
};
将卡片放置在空间上时,将调用此setState
函数(使用immutability-helper
):
// 'bxy' is an object containing x & y position of board to find position
// 'player' is string of either 'p1' or 'p2' to figure out which player just played the card
// 'id' is unique integer of card to provide more card information
this.setState(
{
// add new card to board
board: update(this.state.board, {
[bxy.x]: { [bxy.y]: { $set: { id, player, x, y } } }
})
},
// callback to run game logic based on newly placed card
this.runAfterSetState(player, bxy, id)
);
// Board would look something like this after first card placed:
// board: [
// [null, null, null, null],
// [null, {id: 3, player: "p1", x: 1, y: 1}, null, null],
// [null, null, null, null],
// [null, null, null, null]
// ]
该setState
调用回调函数runAfterSetState
以根据刚玩过的纸牌运行实际的游戏逻辑信息。该函数内还有另一个setState
调用。 setState
仅在特定情况下才会发生,在这种情况下,如果有多张敌方牌,玩家现在需要单击其中一张敌方牌。我认为,为了实现这一点,我需要在board
状态下向敌方卡信息添加新的对象密钥(以便随后可以添加样式,clickHandlers等)。 我认为这是问题所在。
if (enemyCards > 1) {
// new object key to add
let objToAdd = { waitingToBeSelected: true };
// update card object in board state with new object above
enemyCards.map(card => {
this.setState({
board: update(this.state.board, {
[card.x]: { [card.y]: { $merge: objToAdd } }
})
});
});
// this shows the correctly updated information
console.log(this.state.board);
}
虽然上面的控制台日志似乎表明信息已正确更新,但该程序实际上并未反映出此信息(使用React检查器Chrome工具)。我怀疑我的程序在没有此新更新的信息的情况下再次重新渲染Board
组件,实际上是在擦除它吗?据我所知,上面的代码块应该是最后一个被调用的东西,因此应该是组件状态到底是什么。
这里的任何帮助将不胜感激。
带有完整工作代码的Codesandbox(以及我的愚蠢评论):
https://codesandbox.io/s/billowing-leaf-81hw9?fontsize=14
要查看我的特定问题,一张彩色卡片必须有2个或更多箭头触摸相邻的敌方卡片箭头。示例图片:https://i.imgur.com/5SyrSBo.png(红牌的左上和左箭头正在触摸敌方的蓝牌箭头)