web-dev-qa-db-fra.com

Comment charger plus de résultats de recherche lorsque vous faites défiler la page dans React.js?

Je voudrais charger plus de résultats de recherche lorsque vous faites défiler la page. Je travaille avec Google Api Book et je voudrais charger seulement 10 résultats de recherche et si l'utilisateur faites défiler le dernier élément de recherche que les 10 résultats suivants, chargez automatiquement. Comment faire ça? J'ai besoin d'un exemple de code comment une solution appropriée devrait ressembler. Merci pour l'aide.

Mon fichier APP.JS est comme suit:

 import React, { useState } from "react";
 import axios from "axios";
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';


const App = () => {
const [searchTerm, setSearchTerm] = useState("");
const [books, setBooks] = useState({ items: [] });
const onInputChange = e => {
    setSearchTerm(e.target.value);
};

let API_URL = 'https://www.googleapis.com/books/v1/volumes';

const fetchBooks = async () => {

    if (document.getElementById("choose_search").value === "title") {

        const result = await axios.get(`${API_URL}? 
q=${searchTerm}&maxResults=40`);
        setBooks(result.data);
    }
    else {
        const result = await axios.get(`${API_URL}? 
q=inauthor:${searchTerm}&maxResults=40`);
        setBooks(result.data);
    }

};

const onSubmitHandler = e => {
    e.preventDefault();
    fetchBooks();
};

return (
    <section>

            <form onSubmit={onSubmitHandler} id="submit">
                <label>
                    <input
                        type="search"
                        placeholder="Search books"
                        value={searchTerm}
                        onChange={onInputChange}
                    />
                    <button type="submit" class="btn btn- 
  success">Search</button>
                </label>
        </form>

        <div id="choose_position" class="row">
            <div class="col-2">
            <select id="choose_search" class="form-control-sm">
                <option value="" disabled selected>Select search 
 type</option>
                <option value="title">Title</option>
                <option value="author">Author</option>
                </select>
            </div>
        </div>

        <ul>
            {books.items.map((book, index) => {
                return (
                <div>
                        <div class="border rounded">

                        <div class="row">
                            <div class="col-12 d-flex justify-content- 
 center p-4" >
                                <u><h5>{book.volumeInfo.title}</h5></u>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4">
                                <img
                                    id="img_book"
                                    alt={`${book.volumeInfo.title} book`}
                                    src= 
 {`http://books.google.com/books/content?id=${
                                        book.id

  }&printsec=frontcover&img=1&zoom=1&source=gbs_api`}
                                />
                            </div>
                            <div class="col-8">
                                {typeof book.volumeInfo.description === 
 'string' && book.volumeInfo.description.length > 0 ? 
 book.volumeInfo.description : <img src="../no_description.jpg" 
 id="description_img"/>}

                            </div>

                        </div>

                        <div class="row">
                            <div class="col-4"></div>
                            <div class="col-4"><b>Preview:</b> {typeof 
  book.volumeInfo.previewLink === 'string' && 
  book.volumeInfo.previewLink.length > 0 ? <a href= 
 {book.volumeInfo.previewLink}>Link</a> : 'No data'}
                            </div>
                            <div class="col-4"><b>Published date:</b> 
  {typeof book.volumeInfo.publishedDate === 'string' && 
  book.volumeInfo.publishedDate.length > 0 ? book.volumeInfo.publishedDate 
  : 'No data'}
                            </div>

                        </div>

                         <div class="row pb-3">  
                            <div class="col-4"></div>
                                <div class="col-4"><b>Free download:</b> 
  {typeof book.accessInfo.pdf.downloadLink === 'string' && 
  book.accessInfo.pdf.downloadLink.length > 0 ? <a href= 
  {book.accessInfo.pdf.downloadLink}>Link</a> : 'Not avaliable'}
                                </div>
                                <div class="col-4"><b>Ebook version:</b> 
  {typeof book.saleInfo.isEbook === 'boolean' && book.saleInfo.isEbook === 
  true ? 'Yes' : 'No'}
                            </div>
                            <br/>
                        </div>

                            </div><br/>
                    </div> 
                );
            })}
        </ul>
     </section>
   );
   };
   export default App;
javascripthtmlreactjsfrontend
6
Adrian

Ceci s'appelle Infinite Scroll. Si vous ne voulez pas construire cela à partir de la gratorisation, vous pouvez utiliser des libs externes:

https://www.npmjs.com/package/react-infinite-scroller

https://www.npmjs.com/package/reacc-infinite-scroll-component

Si vous voulez le construire vous-même, vous pouvez suivre ces tutoriels:

https://alligator.io/react/react-infinite-scroll/

https://uploirly.com/tatudials/build-an-infinite-scroll-component-in-react-utilisateur-react-hooks

4
alissongranemann

Sans plugins :

componentWillMount(){
  window.addEventListener('scroll', this.loadMore);
}

componentWillUnmount(){
    window.removeEventListener('scroll', this.loadMore);
}

loadMore(){
    if (window.innerHeight + document.documentElement.scrollTop === document.scrollingElement.scrollHeight) {
        // Do load more content here!
    }
}
1
Mohammedsanaulla K