Question

我正在从api.github.com/users/ncesar/repos中获取github仓库，我只想得到10个项目，然后在滚动后加载更多项目。我试图实现自己，但我不知道如何使它适应数组切片（这是为了测试而将数组长度限制为2）。

这是我当前的代码

type

请澄清一下，排序是按星数排序存储库。

我尝试过的事情：

class SearchResult extends Component {
  constructor() {
    super();
    this.state = {
      githubRepo: [],
      loaded: false,
      error: false,
    };
  }

  componentDidMount() {
    this.loadItems(this.props.location.state.userName);
  }

  componentWillReceiveProps(nextProps) {
    if (
      nextProps.location.state.userName !== this.props.location.state.userName
    ) {
      this.loadItems(nextProps.location.state.userName);
    }
  }

  loadItems(userName) {
    axios
      .get(`${api.baseUrl}/users/${userName}/repos`)
      .then((repo) => {
        console.log('repo', repo);
        if (repo.data.length <= 0) {
          this.setState({ githubRepo: '' });
        } else {
          this.setState({ githubRepo: repo.data });
        }
      })
      .catch((err) => {
        if (err.response.status === 404) {
          this.setState({ error: true, loaded: true });
        }
      });
  }

  render() {
    const {
      githubRepo, loaded, error,
    } = this.state;
    return (
      <div className="search-result">
        {error === true ? (
          <h1 style={style}>User not found :(</h1>
        ) : (
          <section id="user-infos">
            <div className="row">
              <div className="col-md-8">
                {githubRepo
                  .sort((a, b) => {
                    if (a.stargazers_count < b.stargazers_count) return 1;
                    if (a.stargazers_count > b.stargazers_count) return -1;
                    return 0;
                  }).slice(0, 2)
                  .map(name => (
                    <UserRepositories
                      key={name.id}
                      repoName={name.name}
                      repoDescription={name.description}
                      starNumber={name.stargazers_count}
                    />
                  ))}
              </div>
            </div>
          </section>
        )}
      </div>
    );
  }
}

export default SearchResult;

但是我不知道在哪里可以传递page参数。这段代码的解释：它在具有页码和每页参数的API上使用。问题是Github API不在存储库列表中提供此功能，因此，这就是为什么我使用slice的原因。

Answer 1

您可以使用类似https://www.npmjs.com/package/react-infinite-scroller

您应该创建一个组件（控制器），该组件将从github下载数据，并将提供更多功能到react-infinite-scroller

并创建另一个将接收和呈现数据的组件

Answer 2

我找到了解决方案。我只需要传递一个状态以进行切片并使用一个函数递增该状态。

这是代码：

            {githubRepo
              .sort((a, b) => {
                if (a.stargazers_count < b.stargazers_count) return 1;
                if (a.stargazers_count > b.stargazers_count) return -1;
                return 0;
              }).slice(0, pageNum)
              .map(name => (
                <UserRepositories
                  key={name.id}
                  repoName={name.name}
                  repoDescription={name.description}
                  starNumber={name.stargazers_count}
                />
              ))}
<button onClick={this.loadMore}>Carregar mais</button>

然后加载更多

  loadMore = (e) => {
    e.preventDefault();
    this.setState(prevState => ({
      pageNum: prevState.pageNum + 5
    }));
  }

现在我只需要停止使用按钮并实施滚动使用

如何使用Github API存储库列表实现无限滚动

2 个答案: