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

Question

我正在比较两支不同的球队，以确定哪支队伍更强。通过计算两队得分的平均值进行比较，值越大的球队越强。

我在这里复制了我的案例：演示

这些是使用的函数。

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 )。

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

Answer 1

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

以前，您试图传递整个scores对象，该对象由Liga和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;
};

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

Answer 2

您在maxAverage上错过了一步：

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

它使用getAverage，但这需要分数，而不仅仅是球队的名字。尝试使用上面的代码，它似乎是有效的。

试着分解代码和调试。最后，我将两个复读器函数移动到它们自己的函数中(仅用于调试)，然后添加一个“调试器”，以便在该页面上找到正在运行的js。

你肯定因为错过了它而自责:P