Question

我有一个工作的React应用程序（还没有Redux或Flux），我想改进它。我现在对我的状态有点困惑。它似乎比包含一些冗余所需的更复杂。

我正在建立一个飞镖游戏（Tactics a.k.a.板球），其中两个玩家在飞镖上击中了数字。达到三次就完成了这个数字。如果你的对手尚未完成，你可以在一个数字上得分。

因为我只想展示一个＆＃39;添加点＆＃39;如果活动玩家已完成并且对手尚未完成，则为某个数字的按钮，活动玩家需要知道对手的已完成状态。

我现在的状态如下：

data: {
  startTurn: false,
  gameFinished: false,
  player1: {
    name: 'Player 1',
    roundsWon: 0,
    turn: false,
    score: {
        '20': {hits: 2, completed: true},
        '19': {hits: 3, completed: true},
        '18': {hits: 3, completed: true},
        '17': {hits: 3, completed: true},
        '16': {hits: 4, completed: true},
        '15': {hits: 5, completed: true},
        '14': {hits: 3, completed: true},
        '13': {hits: 4, completed: true},
        '12': {hits: 3, completed: true},
        '11': {hits: 3, completed: true},
        '10': {hits: 3, completed: true}
    }
  },
  player2: {
    name: 'Player 2',
    roundsWon: 0,
    turn: true,
    score: {
        '20': {hits: 4, completed: false},
        '19': {hits: 4, completed: true},
        '18': {hits: 3, completed: true},
        '17': {hits: 3, completed: true},
        '16': {hits: 3, completed: true},
        '15': {hits: 3, completed: true},
        '14': {hits: 3, completed: true},
        '13': {hits: 3, completed: true},
        '12': {hits: 3, completed: true},
        '11': {hits: 3, completed: true},
        '10': {hits: 3, completed: true}
    }
  }
}

我认为特别是＆＃39;得分＆＃39;可以更好地定义球员的一部分，但我不确定如何。我确实阅读了规范化，但不知怎的，我的状态似乎不合适。

非常感谢任何帮助

定义我的React.js状态

0 个答案: