Reactjs 反应分页不'；不能使用实时搜索

我正在构建一个连接到GoogleBooksAPI的web应用程序，允许用户按名称查找图书（通过使用搜索栏）。实时搜索工作正常，并将结果显示为列表。不幸的是，分页不显示，它只显示可用页面的数量，但在单击页面（例如4）后，它不会显示结果（删除所有以前的页面，并将列表保留为空）。在这种情况下，您能告诉我哪里不对，或者建议其他正确执行实时搜索和分页的方法吗

Home.js

import React, { Component } from 'react';
import axios from 'axios';
import BookList from '../BookList/BookList';
import SearchBar from '../SearchBar/SearchBar';
import Pagination from '../Pagination/Pagination';


class Home extends Component {

  state = {
    books: [],
    textField: '',
    totalResults: 0,
    //totalPages: 0,
    //currentPageNumber: 0,
    loading: false,
    currentPage: 1,
    booksPerPage: 10,
  }    

  search = async value => {
    this.setState({ loading: true });
    const res = await axios(
      `https://www.googleapis.com/books/v1/volumes?q=${value}`
    );
    const booksList = await res.data.items;

    const total = res.data.totalItems;
    //const totalPagesCount = this.getPageCount( total, 10 );

    const mapped = booksList.map(book => {
          return book.volumeInfo;
        })

    this.setState({
      books: mapped,
      loading: false,
      totalResults: total,
     });

      console.log(this.state.totalResults, this.state.totalPages);
  };


  handleChange = (event) => {
    this.search(event.target.value);
    this.setState({textField: event.target.value})
  }


  render() {
    const { currentPage, booksPerPage, books } = this.state;

    const indexOfLastBook = currentPage * booksPerPage;
    const indexOfFirstBook = indexOfLastBook - booksPerPage;


    const filtered = books.filter(book => {
      return book.title.toLowerCase().includes(this.state.textField.toLowerCase());
    })

    const currentBooks = filtered.slice(indexOfFirstBook, indexOfLastBook);

    const paginate = (pageNumber) => {
      this.setState({currentPage: pageNumber})
    }

    const nextPage = () => {
      this.setState({currentPage: currentPage + 1})
    }

    const previousPage = () => {
      this.setState({currentPage: currentPage - 1})
    }


    return (
      <div className="container">
        <h1 className="my-5 text-primary text-center">Books</h1>
        <SearchBar change={this.handleChange}/>
        <BookList allBooks={currentBooks} />
          <Pagination
          booksPerPage={booksPerPage}
          totalBooks={this.state.totalResults}
          paginate={paginate}
          nextPage={nextPage}
          previousPage={previousPage}/>
      </div>
    );
  }
}

export default Home;

import React，{Component}来自'React'；
从“axios”导入axios；
从“../BookList/BookList”导入BookList；
从“../SearchBar/SearchBar”导入搜索栏；
从“../Pagination/Pagination”导入分页；
类Home扩展组件{
状态={
书籍：[]，
文本字段：“”，
结果：0，
//总页数：0，
//当前页码：0，
加载：false，
当前页面：1，
每页:10，
}    
搜索=异步值=>{
this.setState（{loading:true}）；
const res=等待axios(
`https://www.googleapis.com/books/v1/volumes?q=${value}`
);
const booksList=wait res.data.items；
const total=res.data.totalItems；
//const totalPageScont=this.getPageCount（总计，10）；
const mapped=booksList.map（book=>{
返回book.volumeInfo；
})
这是我的国家({
书籍：地图，
加载：false，
总计结果：总计，
});
log（this.state.totalResults，this.state.totalPages）；
};
handleChange=（事件）=>{
this.search（event.target.value）；
this.setState（{textField:event.target.value}）
}
render（）{
const{currentPage，booksPerPage，books}=this.state；
const indexOfLastBook=currentPage*booksPerPage；
const indexOfFirstBook=indexOfLastBook-booksPerPage；
const filtered=books.filter（book=>{
return book.title.toLowerCase（）.includes（this.state.textField.toLowerCase（））；
})
const currentBooks=filtered.slice（indexOfFirstBook、indexOfLastBook）；
常量分页=（页码）=>{
this.setState（{currentPage:pageNumber}）
}
常量下一页=（）=>{
this.setState（{currentPage:currentPage+1}）
}
const previousPage=（）=>{
this.setState（{currentPage:currentPage-1}）
}
返回(
书
);
}
}
导出默认主页；

Pagination.js

import React from 'react';

const Pagination = (props) => {

    const { booksPerPage, totalBooks, paginate, nextPage, previousPage } = props;

    const pageNumbers = [];

    for (let i = 1; i <= Math.ceil(totalBooks / booksPerPage); i++) {
        pageNumbers.push(i);
    }

    return(
        <div>
            <nav>
                <ul className="pagination justify-content-center">
                    <li className="page-item">
                        <a className="page-link" href="#" onClick={() => previousPage()}>Previous</a>
                    </li>
                        {pageNumbers.map(number => {
                            return <li className="page-item" key={number}>
                                <a onClick={() => paginate(number)} className="page-link">{number}</a>

                            </li>
                        })}
                    <li className="page-item">
                        <a className="page-link" href="#" onClick={() => nextPage()}>Next</a>
                    </li>
                </ul>
            </nav>

        </div>
    );
};

export default Pagination;

从“React”导入React；
常量分页=（道具）=>{
const{booksPerPage，totalBooks，paginate，nextPage，previousPage}=props；
常量页码=[]；
for（设i=1；i{
return



);
};
导出默认分页；

SearchBar.js

import React from 'react';
import classes from './SearchBar.module.css';

const SearchBar = (props) => {

    const { change } = props;

    return(
        <div className={classes.container}>
            <input className={classes.input} onChange={change} type="text" placeholder="Start typing..."/>
        </div>
    );
};

export default SearchBar;

从“React”导入React；
从“/SearchBar.module.css”导入类；
常量搜索栏=（道具）=>{
const{change}=props；
返回(
);
};
导出默认搜索栏；