在React.js中向下滚动页面时如何加载更多搜索结果? [英] How to load more search results when scrolling down the page in React.js?

问题描述

向下滚动页面时，我想加载更多搜索结果. 我使用google API书籍，并且只想加载10个搜索结果，并且如果用户滚动到最后一个搜索元素，则自动加载下一个10个搜索结果.怎么做?我需要一个代码示例，正确的解决方案应该是什么样子.感谢您的帮助.

I would like to load more searching results when scrolling down the page. I work with google API book and I would like to load just 10 searching results and if user scroll to the last search element than next 10 results load automatically. How to do that? I need a code example how proper solution should look like. Thanks for help.

我的App.js文件如下:

My App.js file is as follow:

 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;

推荐答案

这称为无限滚动. 如果您不想从头开始构建它，则可以使用外部库:

This is called infinite scroll. If you don't wanna build this from the scratch, you can use external libs:

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

https://www.npmjs.com/package/react-infinite-滚动组件

如果您想自己构建它，可以按照以下教程进行:

If you wanna build it yourself, you can follow these tutorials:

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

https://upmostly. com/tutorials/build-in-infinite-scroll-component-in-react-using-react-hooks

这篇关于在React.js中向下滚动页面时如何加载更多搜索结果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！