[英]Method not getting correct useState value despite updating state in React
我在一個試圖顯示分頁學生信息的網站上工作。 例如,我有 12 個學生,我有分頁項目 1-4,因為我一次顯示 3 個學生。
當我調用我的更新分頁 function 時,我遇到了一個問題。盡管我正確地遞增了它,但此方法中的計數器始終為 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()
function 內部,您在調用setCurrentPage(...)
function 后立即使用currentPage
,但 state 是異步更新的。 所以currentPage
將是舊值而不是更新值。
另一個問題是,如果用戶點擊next
按鈕三次,那么條件pageCount + limit === currentPage
將為true
, pageCount
將設置為pageCount + limit
,即 3。這意味着handleNext()
function 中的循環for (let i = pageCount; i < pages; i++) {...}
只會執行一次。 所以tmpArray
將只包含一個元素,即 4。
此外,由於調用handleNext()
function 會根據其先前的值更新currentPage
,因此您應該通過將 function 傳遞給setCurrentPage()
function 來更新 state
setCurrentPage((page) => page + 1);
類似於上一頁的 go:
setCurrentPage((page) => page - 1);
這將確保 state 已正確更新。
之前並不清楚您為什么使用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]);
要一次顯示有限數量的學生,請創建一個 function,它根據currentPage
和limit
對students
數組進行切片。
const getPaginatedStudents = () => { const startIndex = currentPage * limit - limit; const endIndex = startIndex + limit; return students.slice(startIndex, endIndex); };
要顯示等於limit
的有限頁數,您不需要pageCount
。 您可以創建一個 function 來根據currentPage
和limit
對pagination
數組進行切片。 這個 function 與步驟 2 中創建的類似,但區別在於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); }, [students, 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, 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; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <div id="root"></div>
您也可以在 codesandbox 上查看此演示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.