你可以使用 React 状态动态地入队和出队吗？答案

【问题标题】：Can you dynamically enqueue and dequeue with React state?你可以使用 React 状态动态地入队和出队吗？
【发布时间】：2019-06-11 04:20:55
【问题描述】：

我正在尝试使用我的 React 状态创建一个游戏玩家对象。我想动态地做到这一点，所以我不必硬编码能够玩的玩家数量。有没有办法通过 JS FIFO 队列来实现这种状态变化？

在我的例子中，我试图建立一个玩家队列，并在玩家轮到后将状态内的每个玩家出列。如果他们得分正确，玩家将需要能够排到队伍的后面。

我不确定是否可以在 setState 中使用函数，例如 dequeue()？如果我不能这样做，我是否只是在设置状态之前构建我的队列对象，然后将该结果传递给我的 setState？

另外，不知道React state是否允许组件的state对象动态改变？如果我在州内有多个玩家的队列，例如：

playerQueue = {
   1: {
        id: 123,
        score: 5,
        queued: false,
        currentTurn: false
        },
   2: {
        id: 237,
        score: 7,
        queued: true,
        currentTurn: false
      },
   3: {
        id: 488,
        score: null,
        queued: true,
        currentTurn, true
      }

状态是否允许我按照该对象结构动态添加我想要的任意数量的玩家？

这大概是我现在所拥有的。 high-Score setState 工作正常。我不确定如何进行玩家队列。我基本上是在更新记分牌。我也需要这个动作来改变我的状态到下一个玩家的回合。

if (score > tableHighScore) {

          this.setState(prevState => ({
            highestScore: {
              score: score, 
              player: player,
              tableHighScore: score
            },
            //playerQueue: {
            //  ...prevState, dequeue();
            //}
          }));
        }

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

我认为你可以使用 Map 而不是普通对象

const m = new Map();
m.set('key1', { id: 12, ... })
m.set('key2', { id: 12, ... })
// get the first entry
const firstEntry = m.entries().next().value // [ 'key1', {} ]
m.delete(firstEntry[0])
// add to the map 
m.set('key3', {})

而且每次要修改地图，都必须先克隆

const newMap = new Map(existingMap)

【讨论】：