React 搜索栏上的分页

Question

编辑：我有一些工作要做并更新了我的代码。不幸的是，它只是部分工作。我做错了什么？

另外，我想只显示当前页和最后一页 - 有什么好的建议吗？

此外，如果有人能告诉我如何做一个取消令牌，那将是一个很大的帮助。似乎可以弄清楚如何把它放在那里。

我正在尝试制作一个带分页的搜索栏。我已经成功地使它可以使用 api 进行搜索，但是我似乎无法理解分页。

谁能给我一个例子来说明我将如何做到这一点？我已经浏览了大量的教程和博客、youtube、github 等等。

import {useEffect, useState} from 'react';
import './App.css';
import axios from 'axios';

function App() {
    const [data, setData] = useState([] as any[]);
    const [query, setQuery] = useState("");

    const [currentPage, setCurrentPage] = useState(1);
    const [itemsPerPage, setItemsPerPage] = useState(5);

    const handleClick = (event:any) => {
      setCurrentPage(Number(event.target.id));
    };

    const pages = [];
    for (let i=1; i<=Math.ceil(data.length/itemsPerPage);i++ ){
      pages.push(i);
    }

    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

    const renderPageNumbers = pages.map(number => {

      return (
        <li key={number} onClick={handleClick}>
          {number}
        </li>
      )
    })

    useEffect(() => {
        const fetchData = async () => {

            try {
                const {data} = await axios.get(`https://2isz0zc3qk.execute-api.eu-central-1.amazonaws.com/staging/search?term=${query}`)
                setData(data.items)
            } catch (error) {
                console.error(error)
            }
        }

        fetchData()
    }, [query]);


    return (
      <div className="App">
          <div className="search">
              <input type="text"
                     placeholder={"Search product..."}
                     className={"input"}
                     onChange={event => setQuery(event.target.value)}
                     value={query}
              />
          </div>
          <div className="results">
              {currentItems.map((value, key) => (
                  <ul className='items'>
                    <li className='item'>
                      <a href={`https://www.whiteaway.com${value.url}`} target='_blank' rel='noreferrer'>
                        <img src={value.image} alt={value.name} />
                        <p>{value.name}</p>
                      </a>
                    </li>
                  </ul>
              ))}
          </div>
          <div>
            <ul className="pageNumbers">
              {renderPageNumbers}
            </ul>
          </div>
      </div>
  );
}

export default App;

Answer 1

您可以在这里使用 React Query 看看它是如何完成的： https://react-query.tanstack.com/examples/pagination