Question

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

这是给我加星号的api网址：https://api.github.com/users/cesar/repos

这是我的实际代码：

SET(...)

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

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>
);

Answer 1

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

<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中按星数对用户存储库进行排序

1 个答案: