Javascript 在刷新页面之前，React内容数据不正确

我有一个应用程序，它可以显示运动员的名字，并允许用户根据他们预测的未来表现对他们进行投票

我已经开始实现代码来检查玩家数组，并根据他们的投票数量对数据库中的所有玩家进行排名，奖励那些排名相同的玩家（如果排名前两位的人有100票，他们都将被排在第1位，以此类推）

系统似乎工作正常，但有时它会让我在播放器旁边的值最终正确之前刷新页面两次

然而，我主要想知道这是否是一种可以接受的排序方式——主要是，作为render（）返回中的事务，以这种方式进行排序是否效率低下？我希望数据库中有100多名玩家

代码中是否有其他地方可以更有效地进行排名

以下是代码和一些相关变量：

let prevPlayerVotes = 0
let rankCount = 1

const orderedPlayersRank = _.orderBy(players, ['votes'], ['desc'])

---

上升趋势
{
OrderedPlayerRank.map（（玩家）=>{
this.database.child（player.id）.transaction（function（player）{
如果（player.voces>=prevPlayerVotes）{
prevPlayerVotes=玩家投票
player.rank=rankCount
}否则如果（player.voces{
返回(
)
})
}
下降趋势
{
OrderedPlayerDown.map（（播放器）=>{
返回(
)
})
}

谢谢你的建议

参考图像：

---

您不希望在渲染中进行排名。这将是低效的

任何时候任何更改（例如，单击向上/向下投票，或者如果您有一个文本字段，并且有人键入了一个字符）都会触发渲染，并且很可能每个用户操作都不需要重新排列列表

如果列表只需要排名一次，请在构造函数中进行排序

如果每次投票时都需要对列表进行排序，请在构造函数和单击投票按钮时处理的函数中进行排序

• 如果单击向上，您只想对趋势向上的

  进行排名

  ，如果单击向下，您只想对趋势向下的

  进行排名

---

另一个需要调用的功能是使用es6指针函数，如果不执行任何其他数据操作，则无需指定return

所以不是

const alwaysTrue = () => { return true };

你能行

const alwaysTrue = () => true;

代码示例：

  orderedPlayersDown.map((player) => (
        <Player
            playerContent={player.playerContent}
            playerId={player.id}
            rank={player.rank}
            key={player.id}
            upvotePlayer={this.upvotePlayer}
            downvotePlayer={this.downvotePlayer}
            userLogIn={this.userLogIn}
            userLogOut={this.userLogOut}
            uid={this.uid}
        />
    ))

orderedPlayersDown.map（（播放器）=>(
))

  orderedPlayersDown.map((player) => (
        <Player
            playerContent={player.playerContent}
            playerId={player.id}
            rank={player.rank}
            key={player.id}
            upvotePlayer={this.upvotePlayer}
            downvotePlayer={this.downvotePlayer}
            userLogIn={this.userLogIn}
            userLogOut={this.userLogOut}
            uid={this.uid}
        />
    ))