Giphy APIを使用して特定の結果をレンダリングするにはどうすればよいですか？

Question

これでReactを使って、割り当てごとに単純なアプリを構築しています。さて、私はあなたがユーザー入力からの検索結果に基づいてたくさんのGIFをレンダリングできることを知っていますが、私が選択した特定の結果のみをレンダリングするにはどうすればよいですか？

たとえば、ユーザー入力なしで、反応GIFのページまたは面白いcat gifのページを提示したければ、

さらに、ページを10ギガバイト単位でページ分割するとどうなりますか？

私は明確な答えをオンラインで見つけることができませんでしたので、皆さんの助けを借りて助けてくれれば幸いです。前もって感謝します。

Answer 1

ユーザーが制御していないクエリを設定し、その結果をフェッチしてレンダリングする必要があります。ページネーションはかなり簡単です。APIのlimitとoffsetパラメータ（Docs）を使用してください。

非常に基本的な例：

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>