React中如何对GraphQL返回的复杂球队数组按总积分降序排序

要实现按总积分倒序排列，你只需要在遍历渲染前对data.teams数组按积分排序即可，建议先把积分计算逻辑抽为公共函数，同时注意Array.sort()会修改原数组，最好先拷贝一份再操作避免污染原始接口返回数据。

修改后的代码如下：

// 抽离积分计算逻辑，复用避免重复编码
const getTeamPoints = (team) => {
  return team.match.map(match => 
    match.teams[0].name === team.name ? match.homePoints : match.awayPoints
  ).reduce((prev, curr) => prev + curr, 0)
}

<Tbody>
  {!fetching && 
    // 先浅拷贝数组再排序，不修改原data数据
    [...data.teams].sort((a, b) => getTeamPoints(b) - getTeamPoints(a))
    .map((team, index) => (
      <Tr key={team.id}>
        <Td>{index + 1}</Td>
        <Td>{team.name}</Td>
        <Td>{getTeamPoints(team)}</Td>
      </Tr>
    ))
  }
</Tbody>

如果球队数量较多，可以提前计算好所有队伍的积分再排序，避免排序过程中重复计算积分提升性能：

<Tbody>
  {!fetching && 
    data.teams
      .map(team => ({ ...team, points: getTeamPoints(team) }))
      .sort((a, b) => b.points - a.points)
      .map((team, index) => (
        <Tr key={team.id}>
          <Td>{index + 1}</Td>
          <Td>{team.name}</Td>
          <Td>{team.points}</Td>
        </Tr>
      ))
  }
</Tbody>

内容的提问来源于stack exchange，提问作者Max