如何基于距离数组对API数据排序并渲染React卡片组件？

我已从API获取数据data及距离数组distance，该数组存储了地图上每个数据对象与我点击点位之间的计算距离。请问如何将这些对象按距离由近到远排序，并据此渲染卡片列表？

数据示例 #

data = [{id: 20, name: 'Yoda', height: 0.66, mass: 13, gender: 'male', …}, ...]
distance = [15277.712059994128, 9096.467900013797, 2693.8381772957678, ...]

当前组件代码 #

CardList组件

const CardList = ({ data, distance }) => {
  return (
    <div className='card-list'>
      <div className='card-list_container'>
        {data.map((hero) => {
          return <Card key={hero.id} id={hero.id} distance={distance} />;
        })}
      </div>
    </div>
  );
};

export default CardList;

Card组件

const Card = ({ id, distance }) => {
  const data = useHeroData({ id });
 return (
    <div className='card'>
      <div className='card-container'> 
          <p className='hero-stats'>
                <span className='hero-stats_tag'>Mass:</span> {data.mass} kg
              </p>
              <p className='hero-stats'>
                {' '}
                <span className='hero-stats_tag'>Distance:</span>
                {Math.ceil(data.distance)} Km
              </p>
            </div>
    </div>
 );
};

1. 关联数据与对应距离 #

假设data和distance的索引一一对应（即data[0]对应distance[0]），先把每个英雄数据和对应的距离绑定：

const combinedData = data.map((item, index) => ({
  ...item,
  distance: distance[index]
}));

2. 按距离升序排序 #

对组合后的数组按距离由近到远排序，注意用扩展运算符避免修改原数据：

const sortedData = [...combinedData].sort((a, b) => a.distance - b.distance);

3. 修改CardList组件渲染排序后的数据 #

更新CardList组件，完成数据组合排序后再渲染卡片，同时优化参数传递：

const CardList = ({ data, distance }) => {
  // 组合数据并排序
  const sortedHeroes = data
    .map((hero, index) => ({ ...hero, distance: distance[index] }))
    .sort((a, b) => a.distance - b.distance);

  return (
    <div className='card-list'>
      <div className='card-list_container'>
        {sortedHeroes.map((hero) => (
          <Card key={hero.id} hero={hero} />
        ))}
      </div>
    </div>
  );
};

export default CardList;

4. 调整Card组件接收数据 #

直接接收完整的英雄对象，避免重复获取数据：

const Card = ({ hero }) => {
 return (
    <div className='card'>
      <div className='card-container'> 
          <p className='hero-stats'>
                <span className='hero-stats_tag'>Mass:</span> {hero.mass} kg
              </p>
              <p className='hero-stats'>
                <span className='hero-stats_tag'>Distance:</span>
                {Math.ceil(hero.distance)} Km
              </p>
            </div>
    </div>
 );
};

备选方案（保留useHeroData的情况） #

如果必须通过useHeroData获取数据，可调整为传递对应距离值：

// CardList中传递对应距离
{sortedHeroes.map((hero) => (
  <Card key={hero.id} id={hero.id} distance={hero.distance} />
))}

// Card组件中使用传入的distance
const Card = ({ id, distance }) => {
  const data = useHeroData({ id });
 return (
    <div className='card'>
      <div className='card-container'> 
          <p className='hero-stats'>
                <span className='hero-stats_tag'>Mass:</span> {data.mass} kg
              </p>
              <p className='hero-stats'>
                <span className='hero-stats_tag'>Distance:</span>
                {Math.ceil(distance)} Km
              </p>
            </div>
    </div>
 );
};

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