早上好你好嗎？我遇到了分頁問題，??當我單擊更改頁面時，它會顯示頁面結果并立即回傳第一個，您知道如何幫助我嗎？
例如，如果我點擊第 2 頁，它的結果出現但它立即回到第 1 頁，我不知道它是否可以是路由或類似的東西
import Table from "react-bootstrap/Table";
import axios from "axios";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Search from "../components/Search";
import Pagination from "../components/Pagination";
const endpoint = "http://localhost:8000/api";
const AccountShow = () => {
const [accounts, setAccounts] = useState([]);
const keys = [
"nome",
"razaoSocial",
"statusConta",
"setor",
"segmentoAtuacao",
"naturezaJuridica",
];
const [query, setQuery] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [accountsPerPage] = useState(5);
const indexOfLastAccount = currentPage * accountsPerPage;
const indexOFirstAccount = indexOfLastAccount - accountsPerPage;
const currentAccounts = accounts.slice(
indexOFirstAccount,
indexOfLastAccount
);
const paginate = (pageNumber) => setCurrentPage(pageNumber);
useEffect(() => {
getAllAccounts();
}, []);
const getAllAccounts = async () => {
const response = await axios.get(`${endpoint}/accounts`);
setAccounts(response.data);
};
const deleteAccount = async (id) => {
await axios.delete(`${endpoint}/account/${id}`);
getAllAccounts();
};
return (
<div className="d-grid gap-2">
<div className="row">
<div className="col-8">
<Form className="d-flex m-1">
<Form.Control
type="text"
placeholder="Filtro"
className="me-2"
aria-label="Search"
onChange={(e) => setQuery(e.target.value)}
/>
</Form>
</div>
<div className="col-4">
<Link
to="/account/create"
className="col-11 btn btn-outline-primary m-1 "
>
Create
</Link>
</div>
</div>
<Table hover className="">
<thead>
<tr>
<th scope="col">#</th>
<th className="col-2" scope="col">
Nome
</th>
<th className="col-2" scope="col">
Raz?o Social
</th>
<th scope="col">Status da Conta</th>
<th scope="col">Setor</th>
<th scope="col">Segmento Atuacao</th>
<th scope="col">Natureza Juridica</th>
<th scope="col">Capital</th>
<th scope="col">Funcionarios</th>
<th className="text-center" scope="col">
A??es
</th>
</tr>
</thead>
<tbody>
{Search(currentAccounts, query, keys).map((account) => (
<tr key={account.id}>
<th>{account.id}</th>
<td>{account.nome}</td>
<td>{account.razaoSocial}</td>
<td>{account.statusConta}</td>
<td>{account.setor}</td>
<td>{account.segmentoAtuacao}</td>
<td>{account.naturezaJuridica}</td>
<td>{account.capital}</td>
<td>{account.funcionarios}</td>
<td className="text-center">
<Link
to={`edit/${account.id}`}
className="btn btn-outline-warning"
>
Editar
</Link>
<button
onClick={() => deleteAccount(account.id)}
className="btn btn-outline-danger m-1"
>
Deletar
</button>
</td>
</tr>
))}
</tbody>
</Table>
<Pagination
dadosPorPagina={accountsPerPage}
totalDados={accounts.length}
paginate={paginate}
/>
</div>
);
};
export default AccountShow;
接下來我將離開我的分頁器組件
import React from "react";
const Pagination = ({ dadosPorPagina, totalDados, paginate }) => {
const pageNumbers = [];
for (
let index = 1;
index <= Math.ceil(totalDados / dadosPorPagina);
index
) {
pageNumbers.push(index);
}
return (
<div>
<nav>
<ul className="pagination">
{pageNumbers.map((number) => (
<li key={number} className="page-item">
<a onClick={() => paginate(number)} href="" className="page-link">
{number}
</a>
</li>
))}
</ul>
</nav>
</div>
);
};
export default Pagination;
uj5u.com熱心網友回復：
因為您正在映射這個空的 const pageNumbers = [] 陣列，并且如果您單擊一個標簽，您是否希望在您的分頁函式中收到一些東西。
uj5u.com熱心網友回復：
在您的分頁器中，每次回圈時，您的索引都會在 for 回圈中重置回 1。嘗試將以下內容移到回圈之外。
import React from "react";
const Pagination = ({ dadosPorPagina, totalDados, paginate }) => {
const pageNumbers = [];
let index = 1;
for (
index <= Math.ceil(totalDados / dadosPorPagina);
index
) {
pageNumbers.push(index);
}
return (
<div>
<nav>
<ul className="pagination">
{pageNumbers.map((number) => (
<li key={number} className="page-item">
<a onClick={() => paginate(number)} href="" className="page-link">
{number}
</a>
</li>
))}
</ul>
</nav>
</div>
);
};
export default Pagination;
uj5u.com熱心網友回復：
只需向活動頁面的分頁組件添加一個引數即可設定當前頁面。你可以通過如下
AccontShow 組件
<Pagination
dadosPorPagina={accountsPerPage}
totalDados={accounts.length}
paginate={paginate}
activePage={currentPage}
/>
現在在分頁組件中采用 activePage 引數
const Pagination = ({ dadosPorPagina, totalDados, paginate, activePage }) => {//code}
現在在 pageNumbers 地圖中檢查當前頁面并將 css 類和 css 樣式添加到該“li”專案以顯示為活動
<ul className="pagination">
{pageNumbers.map((number) => (
<li key={number} className=`page-item ${number == activePage ? 'page-item-active': ''}`>
<a onClick={() => paginate(number)} href="" className="page-link">
{number}
</a>
</li>
))}
</ul>
在這里，我有條件地添加了“page-item-active”類，您可以更改它并將樣式添加到該類
感謝和投票如果有用:)
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/515700.html