如何按照其中一个对象属性的最高值排序返回的对象？-解网

问：

我需要按其中一个对象值（int）对映射到 div 的数组对象进行排序

我正在构建一个 react 应用程序，该应用程序将允许某人根据他们的专业过滤掉大学（即，如果用户选择计算机工程，则显示 GWU、ASU、UoA 等。在返回的数据中，大学模型有一个 upvoteCount，它基本上等同于一个“like”。如果用户选择从高到低查看返回的数据，反之亦然，我将如何处理返回并放入 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
}]

任何帮助将不胜感激

JavaScript ReactJS 排序对象 Array.Prototype.map

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;

上一个：如何根据条件在对象数组中推送值并避免在 Angular 14 中推送重复项

下一个：如何在 react 应用程序中访问获取的 json 值

如何按照其中一个对象属性的最高值排序返回的对象？

How to order returned objects in order of highest value of one of the objects properties?

评论