0

我是一名 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 （红卡左上角和左上箭头接触敌方蓝卡箭头）

4

0 回答 0