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

时间:2019-06-25 18:16:28

标签: javascript reactjs setstate react-dnd immutability-helper

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

0 个答案:

没有答案