从 dribbble API 返回无限数据

Question

我正在使用从 Dribbble API 返回的数据制作应用程序：http://developer.dribbble.com/v1/ 如何返回无限 Dribbble 镜头？每个镜头数量（例如10次镜头）在2秒和2秒内出现？我知道它并不优雅或有用，但我想以此开始，然后在将来做一些更复杂的事情。我正在使用 React.JS 制作这个应用程序

import _ from 'lodash';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dribbble from './dribbble';

export default class Dribbbles extends React.Component {
  constructor(props) {
    super(props);
    this.state = { work: [] };
}

componentDidMount() {
  this.ShotList();
}

ShotList() {
  return $.getJSON('https://api.dribbble.com/v1/shots?per_page=3&access_token=<token>&callback=?')
    .then((resp) => {
      this.setState({ work: resp.data.reverse() });
  });
}

render() {

  const works = this.state.work.map((val, i) => {
    return <Dribbble dados={val} key={i} />
  });

  return <ul>{works}</ul>
 }
}

Answer 1

所以，你的问题实际上是一个由两部分组成的问题：

1. 如何修改 Dribble API url 以获得“无限”投篮
2. 如何让你的 React 应用真正要求“无限”镜头

那么，让我们先解决第一部分。

在 Dribble API 文档的“分页”部分下，他们指出：

返回多个项目的请求将默认分页至 30 个项目。您可以使用

page

 参数

指定更多页面

所以，这意味着他们一次最多为我们提供 30 个项目，每个完整的 30 个项目集就是一个页面。因此，第 0-29 项位于

page=1

，第 30-59 项位于 

page=2

，依此类推。

太棒了，所以，为了获取镜头，这意味着我们需要做的就是构建一个如下所示的 URL：

https://api.dribbble.com/v1/shots?page=<pageNumber>

（当然附有您的访问令牌）。

这是第 1 部分。现在是第 2 部分，如何让您的应用程序请求每个页面。我们不想对所有镜头同时发出数百/数千个请求（因为这会杀死用户的设备，Dribble 会禁止你，而且我们甚至不知道有多少页面）。我们能做的就是将 30 个加载到列表中，让用户滚动到列表底部，当他们到达那里时，加载下一个 30 个，依此类推。这样，您将可以对所有镜头进行“无限”分页。

那么，该怎么做呢？好吧，让我们在您的应用程序中添加一些滚动功能。我要在这里插入

react-waypoint

，因为它效果很好，而且我的公司也支持它:)

import _ from 'lodash';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Waypoint from 'react-waypoint';
import Dribbble from './dribbble';

export default class Dribbbles extends React.Component {
  constructor(props) {
    super(props);
    this.state = { page: 1, shots: [] };

    // Remember that you have to bind `this` to non-lifecycle methods that
    // use `this` when working inside ES6 React classes
    this.getShots = this.getShots.bind(this);
  }

  componentDidMount() {
    this.getShots();
  }

  // Every time we ask for data, we add it to the data we already have
  // Then, bump the page number, so next time we ask for the next page
  getShots() {
    return $.getJSON('https://api.dribbble.com/v1/shots?page=' + this.state.page + '&access_token=41ff524ebca5e8d0bf5d6f9f2c611c1b0d224a1975ce37579326872c1e7900b4&callback=?')
      .then((resp) => {
        var newShots = this.state.shots.concat(resp.data);
        this.setState({
          page: this.state.page + 1,
          shots: newShots
        });
    });
  }

  render() {
    const shots = this.state.shots.map((val, i) => {
      return <Dribbble dados={val} key={i} />
    });

    // Make sure to always put a `;` after your returns to avoid bugs
    return (
      <div>
        <ul>{shots}</ul>
        <Waypoint
          onEnter={this.getShots}
        />
      </div>
    );
  }
}

所以，它的作用是：首先，我们加载初始镜头列表。每次有人滚动到列表底部时，航点都会告诉我们的应用程序加载更多镜头。一旦这些镜头被加载，列表就会变得更长，用户必须进行更多的滚动，然后这个过程就会不断重复。

我无法测试上面的代码是否完美，因为我没有 Dribble 帐户，但是，它基本上应该是您所需要的。欢迎提问，如果有不明白的地方请告诉我。