时间戳

首页 > 解决方案 > React - 计算元素之间的较大值仅部分工作

javascript - React - 计算元素之间的较大值仅部分工作

问题描述

我正在比较两个不同的团队来确定哪个更强大。比较是通过计算两队得分的平均值来进行的，数值越大的队伍越强。

我在这里复制了我的案例：DEMO

这些是使用的功能

const getAverage = (league, team) => {
  if (isNaN(league[0][team])) return null;

  return league.map(x => x[team]).reduce((a, c) => a + c) / league.length;
};

const maxAverage = (league, teams) => {
  return teams
    .map(team => {
      return {
        team: team,
        avg: getAverage(league, team)
      };
    })
    .reduce((a, b) => (a.avg > b.avg ? a : b)).team;
};


<p>Stronger Team:{maxAverage(this.state.selectedLeague, [this.state.selectedHomeTeam,this.state.selectedAwayTeam])}</p>

正如您在演示中看到的那样，它只能部分工作。

例如，如果我比较并选择马竞对阵巴塞罗那，它定义了巴塞罗那更强，这是错误的（-2 不大于 0），但反过来选择巴塞罗那对阵马竞，它定义了马竞更强，这是正确的（0 大于 - 2)。

我的问题在哪里，我该如何解决？

标签： javascriptreactjsreducees6-map

解决方案

在您的 maxAverage 函数中，您应该引用您想要在scores对象上选择的确切联赛。

以前，您试图传递整个scores对象，该对象由 theLiga和Premier数组组成。这就是为什么当您尝试运行该方法时它会返回 null 的原因。

相反，您应该将选定的联赛传递给该getAverage方法，该方法接受league一个数组（而不是数组的对象）。

这应该是您的maxAverage功能所需的更改。

const maxAverage = (league, teams) => {
  return teams
    .map(team => {
      return {
        team: team,
        avg: getAverage(scores[league], team)
      };
    })
    .reduce((a, b) => (a.avg > b.avg ? a : b)).team;
};

我在这里创建了一个演示。

推荐阅读