Как отобразить конкретные результаты, используя Giphy API?

Question

Итак, я использую React прямо сейчас, чтобы создать простое приложение для каждого задания. Теперь я знаю, что вы можете визуализировать несколько картинок GIF на основе результатов поиска, введенных пользователем, но как отображать только определенные результаты, которые я выбрал?

Например, если бы я просто хотел представить страницу с изображениями реакции или страницу с забавными изображениями кошки без ввода данных пользователем.

Кроме того, что если я захочу разбить эти результаты на страницы, возможно, на 10 гифок на страницу?

Я не смог найти четкого ответа в Интернете, поэтому любая помощь, которую вы, ребята, могли бы оказать, будет принята с благодарностью. Заранее спасибо.

Answer 1

Вы хотите установить запрос, который не контролируется пользователем, получить эти результаты и отобразить их. Разбивка на страницы довольно проста, используйте limit а также offset параметры API ( Документы).

Очень простой пример:

class Category extends React.Component {
  constructor() {
    super();
    this.state = { data: [], paginate: 0 };
    this.fetchNextPage = this.fetchNextPage.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(`https://api.giphy.com/v1/gifs/search?q=${this.props.query}&limit=${this.props.limit}&offset=${this.state.paginate}&api_key=dc6zaTOxFJmzC`)
      .then(res => res.json())
      .then(data => this.setState({ data: data.data }));
  }

  fetchNextPage() {
    this.setState({
      paginate: this.state.paginate + this.props.limit
    }, () => this.fetchData());
  }

  render() {
    return (
      <div>
        <button onClick={this.fetchNextPage}>Next Page</button><br />
        {this.state.data.map(gif => (
            <img
              key={gif.id}
              src={gif.images.fixed_width_small.url}
            />
          ))}
      </div>
    );
  }
}

ReactDOM.render(
  <Category query="cats" limit={10} />,
  document.getElementById("View")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>