我正在構建分頁。我仍在開發我的 API 以根據分頁獲取帖子，但目前我遇到了狀態問題。
在我的主檔案（帖子所在的位置）中，我的代碼如下所示：
// Import modules
import React from "react";
import axios from "axios";
import url from "url";
// Import components
import { Snippet } from "../Snippet";
import { CreatePost } from "./CreatePost";
import { Pagination } from "./Pagination";
// Import styles
import "./css/Content.css";
// Axios Init
const api = axios.create({
baseURL: `http://localhost:5000/api/`,
});
export class Content extends React.Component {
state = {
collections: [
{ title: "ReactJS", color: "red" },
{ title: "HTML", color: "cyan" },
{ title: "CSS", color: "pink" },
],
snippets: [],
limitSnippets: 3,
page: 0,
};
constructor(props) {
super(props);
}
componentDidMount() {
this.getSnippets();
}
getSnippets = async () => {
try {
let data = await api
.get(
`/snippets/fetchAll?limitSnippets=${this.state.limitSnippets}&page=${this.state.page}`,
{
body: {
limitSnippets: 3,
page: 1,
},
}
)
.then(({ data }) => data);
this.setState({ snippets: data });
} catch (error) {
console.log(error);
}
};
updatePagination = (page) => {
this.state.page = page;
console.log(this.state.page);
};
render() {
return (
<div className="content">
<h1 className="content-header">Snippets</h1>
<CreatePost contentUpdater={this.getSnippets} />
<Pagination updatePagination={this.updatePagination} />
<div className="w-layout-grid grid">
{this.state.snippets.map((snippet, i) => {
return (
<Snippet
key={i}
title={snippet.title}
code={snippet.code}
updatedDate={snippet.updatedDate}
createdDate={snippet.createdDate}
language={snippet.language}
creator={snippet.creator}
collections={snippet.collections}
/>
);
})}
</div>
<Pagination />
</div>
);
}
}
export default Content;
在分頁檔案中，我的代碼如下所示：
export const Pagination = (props) => {
// States
const [page, setPage] = useState(0);
// Axios Init
const api = axios.create({
baseURL: `http://localhost:5000/api/`,
});
const handleLeft = (event) => {
event.preventDefault();
if (page > 0) {
setPage(page - 1);
props.updatePagination(page);
} else {
console.log("handleLeft(): page not > 0");
}
//props.updatePagination(page);
//}
};
const handleRight = (event) => {
event.preventDefault();
// page < fetchAllPages
setPage(page 1);
props.updatePagination(page);
};
/*useEffect(() => {
props.updatePagination(page);
}, [page]);
*/
return (
<div className="paginate-div">
<div className="paginate-next">
<div className="paginate-next-icon" onClick={handleLeft}>
<i className="fas fa-caret-left"></i>
</div>
</div>
<a href="#" className="paginate-button first w-inline-block">
<div className="paginate-text">1</div>
</a>
<a href="#" className="paginate-button w-inline-block">
<div className="paginate-text">2</div>
</a>
<a href="#" className="paginate-button w-inline-block">
<div className="paginate-text">3</div>
</a>
<a href="#" className="paginate-button w-inline-block">
<div className="paginate-text">4</div>
</a>
<a href="#" className="paginate-button w-inline-block">
<div className="paginate-text">5</div>
</a>
<a href="#" className="paginate-button w-inline-block">
<div className="paginate-text">6</div>
</a>
<a href="#" className="paginate-button last w-inline-block">
<div className="paginate-text">...</div>
</a>
<div className="paginate-next" onClick={handleRight}>
<div className="paginate-next-icon">
<i className="fas fa-caret-right"></i>
</div>
</div>
</div>
);
};
我有我的分頁組件，它傳遞了一個道具，該道具是 updatePagination() 的函式。分頁組件有左右鍵切換分頁功能，點擊后主檔案更新分頁。
我遇到的問題（抱歉，我的措辭令人困惑） 默認頁面為 0（基本上是第 1 頁）。最瘋狂的是，當我按右鍵（提交時呼叫 handleRight）時，它停留在第 0 頁，然后如果我再次單擊它，它會變為 1，然后如果我按下左按鈕（在提交時呼叫 handleLeft），同時它在第 1 頁上，它以某種方式上升到 2，但是如果我再次單擊它，它會回傳到 1，然后如果我再次單擊它會變為 0。
為什么會出現這個奇怪的問題？
uj5u.com熱心網友回復：
setPage是異步的，所以當你setPage遞減然后立即呼叫時props.updatePage，props.updatePage正在接收 的舊值page。您可以在此處閱讀有關此常見問題的所有資訊。
const handleRight = (event) => {
event.preventDefault();
// Hey React, set page to page 1 and rerender the component
setPage(page 1);
// But before you do that, call props.updatePagination on the old value
props.updatePagination(page);
};
不過，您應該問問自己，為什么要存盤兩個有狀態的值page（一個在父組件中，一個在子組件中）。Content組件不能跟蹤您的頁面狀態（因為它已經這樣做了）并將其作為道具傳遞，從而擺脫了您對子組件中頁面狀態的需求？這稱為提升狀態，它是 React 中的一個基本概念，它激勵您使用盡可能少的狀態來避免這種不同步。此外，根據您共享的代碼，該Pagination組件只顯示頁碼 - 為什么它甚至需要有狀態？
uj5u.com熱心網友回復：
問題是在 updatePagination() 中使用了舊的 page 值，我通過不在同一個地方運行 updatePagination(page) 來解決這個問題，我使用了 useEffect()，并檢查了對 {page} 的更改，然后運行了 updatePagination在那里。
useEffect(() => {
props.updatePagination(page);
}, [page]);
handleLeft、handleRight 函式已更改為如下所示：
const handleLeft = (event) => {
event.preventDefault();
let newPage = page - 1;
if (page > 0) {
setPage(newPage);
} else {
console.log("handleLeft(): page not > 0");
}
//}
};
注意” 在評論部分，有人指出我不應該將頁碼存盤在兩個位置，而是將它們存盤在一個位置并將其作為道具傳遞。我目前還沒有嘗試這樣做，但我計劃很快就會這樣做。但就目前而言，這是這種情況的最佳答案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/390979.html
標籤：javascript 节点.js 反应 表达 猫鼬