【发布时间】: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)}>
▲
</span>
<br/>
<span className={`vote down ${this.state.votedDown === true && 'alreadyVotedDown'}`}
onClick={() => this.handleDownvote(this.playerId)}>
▼
</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