Question

我是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（红牌的左上和左箭头正在触摸敌方的蓝牌箭头）

React setState没有将更新的状态数据作为传递给组件渲染的支持？

0 个答案: