如何解决尽管在React中更新了状态，但是方法没有获得正确的useState值 编辑：演示
我正在一个网站上尝试显示分页的学生信息。例如，当我一次显示3个学生时，我有12个学生，我的分页项1-4。
当我调用更新分页功能时遇到问题。尽管我正确地将其计数，但此方法中的计数器始终为0。任何想法或指针将不胜感激。
import React,{useState,useEffect} from 'react';
function App() {
let students = [
{'name': 'Harry'},{'name': 'Hermoine'},{'name': 'Ron'},{'name': 'Ginny'},{'name': 'Snape'},{'name': 'Bellatrix'},{'name': 'Albus'},{'name': 'Dudley'},{'name': 'Petunia'},{'name': 'Hagrid'},{'name': 'Lee'},{'name': 'James'}
];
let [loaded,setLoaded] = useState(false);
let [pagination,setPagination] = useState([]);
let [limit,setLimit] = useState(3); // how many students are visible at a time
let [pages,setPages] = useState(Math.round(students.length/limit)); // amount of pages based on total students
let [currentPage,setCurrentPage] = useState(1); // the current page
let [pageCount,setPageCount] = useState(0); // counter used to increment/decrement pages in view
function updatePagination() {
let tmpArray = [];
for(let i = pageCount; i < pages; i ++){
tmpArray.push(i+1);
}
// 1-3,4-6 etc...
setPagination(tmpArray.slice(pageCount,pageCount + limit)); // this pageCount is always 0 despite me setting it on handleNext method
}
function handleNext(){
setCurrentPage(currentPage + 1);
if(pageCount + limit === currentPage){
if(currentPage <= pages){
setPageCount(pageCount + limit);
}
}
updatePagination();
}
useEffect(() => {
updatePagination();
setLoaded(true);
},[]);
return (
<main className={styles.app}>
<div className={styles.student}>
<h1>Three student cards</h1>
</div>
<ol className={styles.pagination}>
<div className={styles.paginationContainer}>
<button className={currentPage === 0 ? styles.prev + ' ' + styles.disabled : styles.prev}>prev</button>
{loaded && pagination.map((item,index) => {
return (
<li key={index} className={styles.paginationItem}>
<button className={currentPage === item ? styles.active : null}>{item}</button>
</li>
)
})}
<button onClick={() => {
handleNext()
}} className={currentPage === pages ? styles.next + ' ' + styles.disabled : styles.next}>next</button>
</div>
</ol>
{loaded &&
<div className={styles.info}>
<p>Page Count: {pageCount}</p>
<p>Current Page: {currentPage}</p>
<p>Limit: {limit}</p>
<p>Pages: {pages}</p>
<p>Total Students: {students.length}</p>
<p>Pagination: {pagination}</p>
</div>
}
</main>
);
}
export default App;
解决方法
以下是您的代码中的问题：
-
在
handleNext()函数内部，您在调用currentPage函数之后立即使用setCurrentPage(...)，但是状态是异步更新的。因此currentPage将是旧值，而不是更新后的值。 -
另一个问题是，如果用户单击
next按钮三次，则条件pageCount + limit === currentPage将为true，而pageCount将被设置为{ {1}}为3。这意味着pageCount + limit函数handleNext()中的循环仅执行一次。因此for (let i = pageCount; i < pages; i++) {...}将只包含一个元素，即4。 -
此外，由于调用
tmpArray函数会根据其先前值更新handleNext()，因此您应通过将函数传递给currentPage函数来更新状态setCurrentPage()类似地转到上一页：
setCurrentPage((page) => page + 1);这将确保状态正确更新。
编辑：
您为什么要使用setCurrentPage((page) => page - 1);
尚不清楚，但是您在评论中发布的演示明确了您要实现的目标。
您在问题中提到的问题是pageCount的值始终为零。查看您的代码，我认为您根本不需要pageCount。
要实现所需的功能，您需要执行以下步骤：
-
要填充
pageCount数组，可以利用pagination钩子，该钩子在useEffect数组或students更改时执行。limit -
要一次显示有限数量的学生，请创建一个函数，该函数根据
useEffect(() => { // set pagination let arr = new Array(Math.ceil(students.length / limit)) .fill() .map((_,idx) => idx + 1); setPagination(arr); setLoaded(true); },[students,limit]);和students对currentPage数组进行切片。limit -
要显示等于
const getPaginatedStudents = () => { const startIndex = currentPage * limit - limit; const endIndex = startIndex + limit; return students.slice(startIndex,endIndex); };的有限页数，则不需要limit。您可以创建一个根据pageCount和pagination来切片currentPage数组的函数。该函数与第2步中创建的函数相似，但不同之处在于limit的计算方式。startIndex -
创建将更改
的函数const getPaginationGroup = () => { let start = Math.floor((currentPage - 1) / limit) * limit; let end = start + limit; return pagination.slice(start,end); };currentPage
这就是获得所需功能的全部。
演示
以下代码段显示了一个示例：
function goToNextPage() {
setCurrentPage((page) => page + 1);
}
function goToPreviousPage() {
setCurrentPage((page) => page - 1);
}
function changePage(event) {
const pageNumber = Number(event.target.textContent);
setCurrentPage(pageNumber);
}
const studentsData = [
{ name: "Harry" },{ name: "Hermoine" },{ name: "Ron" },{ name: "Ginny" },{ name: "Snape" },{ name: "Bellatrix" },{ name: "Albus" },{ name: "Dudley" },{ name: "Petunia" },{ name: "Hagrid" },{ name: "Lee" },{ name: "James" },{ name: "Lily" },{ name: "Remus" },{ name: "Voldemort" },{ name: "Dobby" },{ name: "Lucius" },{ name: "Sirius" }
];
function Student({ name }) {
return (
<div className="student">
<h3>{name}</h3>
</div>
);
}
function App() {
let [students] = React.useState(studentsData);
let [pagination,setPagination] = React.useState([]);
let [loaded,setLoaded] = React.useState(false);
let [limit] = React.useState(3);
let [pages] = React.useState(Math.round(students.length / limit));
let [currentPage,setCurrentPage] = React.useState(1);
function goToNextPage() {
setCurrentPage((page) => page + 1);
}
function goToPreviousPage() {
setCurrentPage((page) => page - 1);
}
function changePage(event) {
const pageNumber = Number(event.target.textContent);
setCurrentPage(pageNumber);
}
React.useEffect(() => {
// set pagination
let arr = new Array(Math.ceil(students.length / limit))
.fill()
.map((_,idx) => idx + 1);
setPagination(arr);
setLoaded(true);
},limit]);
const getPaginatedStudents = () => {
const startIndex = currentPage * limit - limit;
const endIndex = startIndex + limit;
return students.slice(startIndex,endIndex);
};
const getPaginationGroup = () => {
let start = Math.floor((currentPage - 1) / limit) * limit;
let end = start + limit;
return pagination.slice(start,end);
};
return (
<main>
<h1>Students</h1>
{loaded && (
<div className="studentsContainer">
{getPaginatedStudents().map((s) => (
<Student key={s.name} {...s} />
))}
</div>
)}
<ol className="pagination">
<div className="paginationContainer">
<button
onClick={goToPreviousPage}
className={currentPage === 1 ? "prev disabled" : "prev"}
>
prev
</button>
{loaded &&
getPaginationGroup().map((item,index) => {
return (
<li key={index} className="paginationItem">
<button
onClick={changePage}
className={currentPage === item ? "active" : null}
>
{item}
</button>
</li>
);
})}
<button
onClick={goToNextPage}
className={currentPage === pages ? "next disabled" : "next"}
>
next
</button>
</div>
</ol>
</main>
);
}
ReactDOM.render(<App/>,document.getElementById('root'));h1 { margin: 0; }
.studentsContainer {
display: flex;
background: #efefef;
padding: 15px 10px;
margin: 5px 0;
}
.student {
flex-grow: 1;
box-shadow: 0 0 2px rgba(0,0.4);
text-align: center;
max-width: 450px;
margin: 0 5px;
}
.pagination {
position: relative;
padding: 0;
}
.paginationContainer {
align-items: center;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(40px,auto));
grid-column-gap: .65rem;
justify-content: center;
justify-items: center;
max-width: 100%;
width: 100%;
position: relative;
}
.paginationItem {
height: 40px;
width: 40px;
user-select: none;
list-style: none;
}
.prev,.next {
user-select: none;
cursor: pointer;
background: transparent;
border: none;
outline: none;
}
.prev.disabled,.next.disabled {
pointer-events: none;
opacity: .5;
}
button {
padding: .65rem;
display: block;
height: 100%;
width: 100%;
border-radius: 50%;
text-align: center;
border: 1px solid #ccc;
outline: none;
cursor: pointer;
}
button.active {
background: rgba(black,.25);
border: none;
color: #777;
pointer-events: none;
}
您还可以在codeandbox上查看此演示。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。