在页面刷新之前反应内容数据不正确答案

【问题标题】：React content data not correct until page refreshed在页面刷新之前反应内容数据不正确
【发布时间】：2018-09-25 01:03:27
【问题描述】：

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

我已经开始实施代码来检查玩家数组并根据他们拥有的票数对数据库中的所有玩家进行排名，将排名相同的人授予相同的排名（如果前两个人有 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>

感谢您的建议。

参考图片：

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

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

任何时候发生任何变化（例如单击赞成/反对票，或者如果您有一个文本字段并且有人输入了一个字符），渲染就会被触发，并且很可能每个用户操作都不会导致需要重新排名名单。

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

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

如果单击向上，您只想对trending up 进行排名，如果单击向下，您只想对trending down 进行排名

【讨论】：

【解决方案2】：

另外需要说明的是，使用 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}
        />
    ))

【讨论】：