javascript - 在页面刷新之前， react 内容数据不正确

Question

我有一个应用程序，可以显示运动员姓名，并允许用户根据他们预测的即将到来的表现对他们进行投票赞成或反对。

我已经开始实现代码来检查玩家数组，并根据他们拥有的票数对数据库中的所有玩家进行排名，为那些平局的玩家授予相同的排名(如果前两名的人有 100 票，他们都将排名第一，等等。)

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

但是，我主要想知道这是否是进行此类排名的可接受的方式 - 主要是，以这种方式作为 render() 返回中的事务来完成是否效率非常低？我预计数据库中有 100 多名玩家。

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

这是代码和一些相关变量:

let prevPlayerVotes = 0
let rankCount = 1

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

---

<span className="trendHeaderUp">TRENDING UP</span>
{
    orderedPlayersRank.map((player) => {
        this.database.child(player.id).transaction(function(player) {
            if (player.votes >= prevPlayerVotes) {
                prevPlayerVotes = player.votes
                player.rank = rankCount
            } else if(player.votes < prevPlayerVotes) {
                rankCount++
                player.rank = rankCount
                prevPlayerVotes = player.votes
            } else {
                console.log("Rank calculation error.")
            }
            return player;
        })
    })
}
{
    orderedPlayersUp.map((player) => {
        return (
            <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}
            />
        )
    })
}
</div>
<div className="playersBody">
    <span className="trendHeaderDown">TRENDING DOWN</span>
    {
        orderedPlayersDown.map((player) => {
            return (
                <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}
                />
            )
        })
    }
</div>

感谢您的建议。

引用图片:

Answer 1

您不想在渲染中进行排名。这效率很低。

任何时候发生任何变化(例如，单击向上/向下投票，或者如果您有一个文本字段并且有人键入一个字符)，渲染就会被触发，并且很可能每个用户操作都不会导致需要重新排名列表。

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

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

• 如果点击向上，您只想对趋势向上进行排名；如果点击向下，您只想对趋势向下进行排名