javascript - 渲染数据前添加条件和排序

Question

想知道如何仅在趋势得分 < 0 或 > 0 等情况下才能将数据库中的某些内容显示到屏幕上。

在我的 render() 中，我有两个使用 lodash 的实例:

const orderedPlayersUp = _.orderBy(players, ['votes'], ['desc']);
const orderedPlayersDown = _.orderBy(players, ['votes']);

这些工作正常。在我的数据库中，人们可以向上或向下投票提交，左侧 (playersUp) 显示投票最高的提交，右侧翻转并在顶部显示评分最低的提交(向下趋势)这是左侧的外观:

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}
              />
            )

问题是双方都显示了所有的提交。例如，左侧正确地在顶部显示了投票最高的提交，但是当您向下滚动时，您最终会看到那些负面评价的提交(例如，投票数为 -10 的提交)。我想让 orderedPlayersUp 只显示投票数 > 0 的提交，而 orderPlayersDown 显示投票数 < 0 的提交。

---

这是 Firebase 布局(包含投票数)及其在屏幕上的显示方式。如您所见，如果它按照我想要的方式实现，我们只会看到 John Doe 和 First Last 处于上升趋势(因为它们有 10 和5 票，分别)，然后 Jane Doe 和 Test Name 分别处于下降趋势，分别为 -10 和 -5。

我应该为此使用 lodash 以外的东西吗？

Answer 1

您可以使用 JavaScript 来过滤不需要的值:

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