如何按照对象属性之一的最高值对返回的对象进行排序？

Question

我需要通过对象值之一（int）对映射到div中的数组对象进行排序

我正在构建一个 React 应用程序，允许某人根据专业过滤大学（即，如果用户选择计算机工程，则显示 GWU、ASU、UoA 等。在返回的数据中，大学模型的 upvoteCount 为本质上相当于“喜欢”。如果用户选择从最高到最低点赞计数查看返回的数据，反之亦然，我该如何处理返回的对象并将其放入 div 中？

我创建了一个组件，可以创建一张包含大学信息的卡片。我想我也许可以使用索引来识别组件，并使用 React.useState() 来评估用户从最高到最低选择的视图。然后放置一个语句来查看这些对象是否需要排序。我希望有一种方法可以通过 div 而不是通过查询来做到这一点。

 {data.universityByMajor.map((university) => (
              <div className="home-box ">
                <UniversityList
                  key={university._id}
                  index={university.upvoteCount}
                  _id={university._id}
                  university_name={university.university_name}
                  university_img={university.university_image}
                  upvotes={university.upvoteCount}
                />
              </div>
            ))}

这就是 data.universityByMajor 的样子：

[{
"__typename":"University",
"_id":"65312d6d895868ce018b1891",
"university_name":"The George Washington University",
"university_image":"GWU_img.png",
"upvoteCount":2
},
{
"__typename":"University",
"_id":"65312d6d895868ce018b1895",
"university_name":"George Mason University",
"university_image":"GMU_img.jpg",
"upvoteCount":0
}]

任何帮助将不胜感激

Answer 1

要通过其中一个对象值 (int) 对映射到 div 的对象数组进行排序，可以使用以下步骤：

1. 按所需值对对象数组进行排序。
2. 将排序后的对象数组映射到 React 组件。
3. 在 div 中渲染 React 组件。

以下是如何在 React 中执行此操作的示例：

import React, { useState } from "react";

const UniversityList = ({ university }) => {
  return (
    <div className="home-box ">
      <h3>{university.university_name}</h3>
      <img src={university.university_img} alt={university.university_name} />
      <p>Upvotes: {university.upvoteCount}</p>
    </div>
  );
};

const App = () => {
  const [data, setData] = useState([
    {
      "__typename": "University",
      "_id": "65312d6d895868ce018b1891",
      "university_name": "The George Washington University",
      "university_image": "GWU_img.png",
      "upvoteCount": 2,
    },
    {
      "__typename": "University",
      "_id": "65312d6d895868ce018b1895",
      "university_name": "George Mason University",
      "university_image": "GMU_img.jpg",
      "upvoteCount": 0,
    },
  ]);

  const [isSortedByUpvoteCount, setIsSortedByUpvoteCount] = useState(false);

  const handleSort = () => {
    setIsSortedByUpvoteCount(!isSortedByUpvoteCount);

    const sortedData = data.sort((a, b) => {
      if (isSortedByUpvoteCount) {
        return b.upvoteCount - a.upvoteCount;
      } else {
        return a.upvoteCount - b.upvoteCount;
      }
    });

    setData(sortedData);
  };

  return (
    <div>
      <button onClick={handleSort}>Sort by upvote count</button>
      <div className="university-list">
        {data.map((university) => (
          <UniversityList key={university._id} university={university} />
        ))}
      </div>
    </div>
  );
};

export default App;