Question

我有一个React应用程序，它显示Firebase数据库中的名称，并在两列中进行排序 - 趋势向上（最高票数在上面）和趋势向下（最低票数）。数据库中的每个名称都有一个votes值，可以是任意数字（总共用户的upvotes - 用户的downvotes）

我已将这些名称加载到我的页面，并在左栏中most votes订购，右栏中的least votes（趋势向上和趋势向下）正常工作。< / p>

在每个人姓名的左边，我有一个带号码的徽章，我想简单地说就是他们的等级号码。在这种情况下，离开上面的数据库，Darnold将是1，Jackson将是2，Chubb将是4，Rosen将是3.现在，我有一个硬编码为每个人。

我的问题是，根据最大票数和最少投票数，查询数据库以查看名称并为玩家分配排名编号的最佳方法是什么？需要考虑的一件事是，如果我有多个具有相同票数的人（这将经常发生），他们将需要具有相同的数字，即如果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 =＆gt; p.votes＆gt; = 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}
              />
            )
          })

如果需要其他相关代码，请告知我们。提前致谢

Answer 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;
            })
          })

结果：

出于某种原因，我需要刷新页面（有时两次）以使渲染显示正确的等级，但代码正在执行它的工作并区分关系和更高/更低的等级。

检查Firebase子项的最大值到最小值

1 个答案: