【问题标题】:Checking Firebase children for largest to smallest values检查 Firebase 子项的最大值到最小值
【发布时间】:2026-01-25 23:00:01
【问题描述】:

我有一个 React 应用程序,它显示来自 Firebase 数据库的名称,并在两列中对它们进行排序——Trending Up(最高的反对票数)和 Trending Down(最低的票数)。数据库中的每个名称都有votes 值,可以是任意数字(用户赞成票的总和 - 用户反对票的总数)

我将这些名称加载到我的页面,并在左栏中按most votes 排序,在右栏中按least votes 排序(向上趋势和向下趋势),效果很好。

在每个人的名字左侧我都有一个带有数字的徽章,我想简单地作为他们的等级编号。在这种情况下,离开上面的数据库,Darnold 为 1,Jackson 为 2,Chubb 为 4,Rosen 为 3。现在,我为每个人都硬编码了 1。

我的问题是查询数据库以查看名称并根据最大票数和最少票数为玩家分配排名编号的最佳方法是什么?需要考虑的一件事是,如果我有多个投票数相同的人(这种情况经常发生),他们将需要拥有相同的票数,即如果 Darnold 是 2,Jackson 是 2,他们在上面的例子中都将是 1 排名,下一个人将是排名 3,依此类推。

部分代码:

render(props){
    return(
        <div className="player fade-in">
            <span className="badges">1</span>
            <p className="playerContent">{this.playerContent}</p>
            <span>
            <span className={`vote up ${this.state.votedUp === true && 'alreadyVotedUp'}`}
            onClick={() => this.handleUpvote(this.playerId)}>
            &#9650;
            </span>
            <br/>
            <span className={`vote down ${this.state.votedDown === true && 'alreadyVotedDown'}`}
            onClick={() => this.handleDownvote(this.playerId)}>
            &#9660;
            </span>
            </span>

        </div>
    )
}

以下是我的玩家在屏幕上的显示和排序方式,使用 lodash。

const orderedPlayersUp = _.orderBy(players, ['votes'], ['desc']).filter(p => p.votes >= 0);

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

如果需要其他相关代码,请告诉我。提前致谢

【问题讨论】:

    标签: javascript reactjs firebase firebase-realtime-database


    【解决方案1】:

    好的,所以这并不完美,我不确定这是否是最有效的方法,但目前可以正常工作。

    let rankCount = 1
    

    const orderedPlayersRank = _.orderBy(players, ['votes'], ['desc'])
    
    
    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;
                })
              })
    

    结果:

    出于某种原因,我需要刷新页面(有时两次)以显示正确的排名,但代码正在完成它的工作并区分平局和更高/更低的排名。

    【讨论】: