Question

我正在使用从Dribbble API返回的数据制作应用：http://developer.dribbble.com/v1/如何返回INFINITE 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网址以获得“无限”镜头
如何让你的React应用程序实际上要求“无限”镜头

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

在the Dribble API docs的“分页”部分，他们注意到：

默认情况下，返回多个项目的请求将分页为30个项目。您可以使用page参数
指定更多页面

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

很好，因此，为了获得Shots，这意味着我们需要做的就是构建一个看起来像这样的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>
    );
  }
}

所以，这样做的原因是：首先，我们加载初始的Shots列表。每当有人滚动到列表的底部时，Waypoint会告诉我们的应用加载更多镜头。一旦加载了这些镜头，列表就会变长，用户必须做更多的滚动，然后这个过程就会不断重复。

我无法测试上面的代码是完美的，因为我没有一个Dribble帐户，但是，它基本上应该是你需要的。随意提问，如果您不明白，请告诉我。

从dribbble API返回无限数据

1 个答案: