按 Github API 中的星数对用户存储库进行排序

Question

我正在构建一个 reactjs 应用程序来显示特定的用户存储库。我需要按星数对它们进行排序，但我不知道如何在 React 中进行排序。

这是 api url 星数：https://api.github.com/users/cesar/repos

这是我的实际代码：

const UserRepositories = props => (
  <div className="user-repos">
    <ul>
      <li>
        <h2 className="repo-name">{props.repoName}</h2>
      </li>
      <li>
        <p className="repo-description">{props.repoDescription}</p>
      </li>
      <li>
        <span>
          <FontAwesomeIcon icon={Star} className="icon" />
          <span className="star-number">{props.starNumber}</span>
        </span>
      </li>
    </ul>
  </div>
);

这是我打印用户存储库的地图

    <div className="col-md-8">
      {githubRepo.map(name => (
        <UserRepositories
          key={name.id}
          repoName={name.name}
          repoDescription={name.description}
          starNumber={name.stargazers_count}
        />
      ))}
    </div>

Answer 1

您可以在调用 map 函数之前使用 sort 函数对存储库进行排序。

<div className="col-md-8">
  {
    githubRepo.sort((a, b) => {
      if (a.stargazers_count > b.stargazers_count) return 1
      else if (a.stargazers_count < b.stargazers_count) return -1
      return 0
    }).map(name => (
      <UserRepositories
        key={name.id}
        repoName={name.name}
        repoDescription={name.description}
        starNumber={name.stargazers_count}
      />
    ))
  }
</div>

按 Github API 中的星数对用户存储库进行排序

Sort user repositories by Stars Count in Github API

javascript

github-api

reactjs