Comment rendre des résultats spécifiques en utilisant Giphy API?

Question

Donc, j'utilise React dès maintenant pour créer une application simple pour une tâche. Maintenant, je sais que vous pouvez rendre un tas de gifs basés sur un résultat de recherche de l'entrée de l'utilisateur, mais comment puis-je rendre seulement les résultats spécifiques que je choisis? Par exemple, si je voulais juste présenter une page de gifs de réaction, ou une page de gifs drôles de chat, sans intervention de l'utilisateur. De plus, et si je voulais ensuite paginer ces résultats de peut-être 10 gifs par page?

J'ai été incapable de trouver une réponse claire en ligne, donc toute aide que vous pourriez rendre serait grandement appréciée. Merci d'avance.

Answer 1

Vous souhaitez définir une requête qui n'est pas contrôlée par l'utilisateur, récupérer ces résultats et les restituer. La pagination est assez simple, utilisez les paramètres limit et offset de l'API (Docs).

exemple très basique:

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>