React组件和状态的问题

Question

我的想法来自一个拥有一系列玩家的组件，随机选择一个并放入另一个组件列表组件。就像在gif中一样：

但是，如同在gif中所示，群组的组成部分没有维持前一个玩家而且我被困在这里。

以下是代码：

组件如何呈现组列表：

 render() {
    const Groups = [
      {index:"A", groupName: "Group A", headPlayer: "Gaspar", team: "Arsenal"},
      {index:"B", groupName: "Group B", headPlayer: "Gonza", team: "Barcelona"},
      {index:"C", groupName: "Group C", headPlayer: "Beto", team: "Juventus"},
      {index:"D", groupName: "Group D", headPlayer: "Agustin", team: "Borussia"}
    ]
    if(this.props.newPlayer.randomPlayer !== undefined) {
      var newPlayer = this.props.newPlayer
      const player = {groupName: "Group 1", headPlayer: newPlayer.randomPlayer, team: "Random Team"}
      Groups[this.props.newPlayer.randomGroup].newPlayer = player;
    }
    const GroupsRender = Groups.map((group, i) => <Group key={i} group={group} /> );

    return (
      <div>
        <h1>Groups</h1>
        <div class="container">
          {GroupsRender}
        </div>
      </div>
    );
  }

组件组：

 render() {
    const { group } = this.props;
    var trRow;
    if (group.newPlayer) {
      trRow = <tr><td>{group.newPlayer.headPlayer}</td><td>{group.newPlayer.team}</td></tr>
    }
    return (
      <div>
        <div class="col-xs-6">
          <h5>{group.groupName}</h5>
          <table class="table table-striped">
            <thead>
              <tr>
                <th>Firstname</th>
                <th>Team</th>
              </tr>
            </thead>
            <tbody>
              <tr class="success">
                <td>{group.headPlayer}</td>
                <td>{group.team}</td>
              </tr>
              {trRow}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

有什么想法吗？没有还原剂或助焊剂可以做到这一点吗？

谢谢！