React应用中如何按对象属性值对返回的大学对象列表排序？

核心思路 #

通过React状态记录用户选择的排序方向，在前端对大学数组做排序处理后再渲染，无需后端重新查询。

具体实现步骤 #

1. 定义排序状态

在你的组件中添加状态跟踪当前排序方向：

import React from 'react';

const UniversityContainer = ({ data }) => {
  // 'desc' 代表降序（点赞数从高到低），'asc' 代表升序（点赞数从低到高）
  const [sortDirection, setSortDirection] = React.useState('desc');

2. 实现排序逻辑

用useMemo优化性能，仅在原数据或排序方向变化时重新计算排序结果：

// 生成排序后的大学数组
  const sortedUniversities = React.useMemo(() => {
    // 处理数据未加载的边界情况
    if (!data?.universityByMajor) return [];
    
    // 复制原数组，避免修改原始props数据
    const universitiesCopy = [...data.universityByMajor];
    
    // 根据排序方向执行排序
    return universitiesCopy.sort((a, b) => {
      if (sortDirection === 'asc') {
        return a.upvoteCount - b.upvoteCount; // 升序：低点赞数优先
      } else {
        return b.upvoteCount - a.upvoteCount; // 降序：高点赞数优先
      }
    });
  }, [data?.universityByMajor, sortDirection]);

3. 渲染排序后的列表

将原渲染逻辑中的data.universityByMajor替换为排序后的数组：

return (
    <div>
      {/* 排序控制按钮 */}
      <div className="sort-controls">
        <button 
          onClick={() => setSortDirection('desc')}
          disabled={sortDirection === 'desc'}
        >
          点赞数从高到低
        </button>
        <button 
          onClick={() => setSortDirection('asc')}
          disabled={sortDirection === 'asc'}
        >
          点赞数从低到高
        </button>
      </div>

      {/* 渲染排序后的大学卡片 */}
      {sortedUniversities.map((university) => (
        <div className="home-box" key={university._id}>
          <UniversityList
            _id={university._id}
            university_name={university.university_name}
            university_img={university.university_image}
            upvotes={university.upvoteCount}
          />
        </div>
      ))}
    </div>
  );
};

export default UniversityContainer;

关键注意事项 #

• 禁止修改原始数据：排序时必须复制原数组，直接修改data.universityByMajor会破坏React的不可变数据原则，引发状态异常。
• 正确设置组件key：始终用university._id作为组件的key，不要使用upvoteCount或数组索引，确保排序后组件能正确复用和更新。
• 性能优化：useMemo缓存了排序结果，避免每次组件渲染都重复执行排序逻辑。

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