Return 来自dribbble的无限数据API

Question

我正在使用从 Dribbble return编辑的数据制作应用程序 API：http://developer.dribbble.com/v1/ 我如何 return 无限 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

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

如何修改 Dribble API url 以获得 "infinite" Shots
如何让您的 React 应用程序真正要求 "infinite" 镜头

所以，让我们先解决第一部分。

在 the Dribble API docs 的 "Pagination" 部分下，他们注意到：

Requests that return multiple items will be paginated to 30 items by default. You can specify further pages with the page parameter

所以，这意味着他们将一次给我们最多 30 个项目，每个完整的 30 个项目集是一个页面。所以项目 0-29 在 page=1 上，项目 30-59 在 page=2 上，等等

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

https://api.dribbble.com/v1/shots?page=<pageNumber>（当然附有您的访问令牌）。

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

那么，如何做到这一点？好吧，让我们在您的应用程序中添加一些滚动。我要在这里插入 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>
    );
  }
}

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

由于我没有 Dribble 帐户，我无法测试上面的代码是否完美，但是，它基本上应该是你所需要的。有问题欢迎提问，有什么不明白的地方请告诉我。

Return 来自dribbble的无限数据API

Return infinite data from the dribbble API

infinite

reactjs