reactjs - 如何通过从页面移动到另一个页面来解决反应分页问题
问题描述
我设置了一个逻辑来使用从端点 API 获取的数据在反应中创建分页,该 API 包含我在此 UI 中显示的 5 个对象,然后我创建了一个函数pageCount,我在我的反应分页组件中实现了,当我点击移到第二页它移到最后一页,下一页,以前它们也不起作用。
我研究了很多来解决这个问题,但我没有找到任何解决方案?
这个问题从何而来?
谢谢
function App() {
//states
const [yogaCourses, setYogaCourses] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [levels, setLevels] = useState([]);
const [level, setLevel] = useState('');
const [pageNumber, setPageNumber] = useState(0);
//Paginate react
const coursePerPage = 2;
// const PageVisited = numberPage * coursePerPage;
const pageCount = Math.ceil(yogaCourses.length / coursePerPage);
console.log(pageCount);
//Track changes on each numberPage and display the data
useEffect(()=> {
setYogaCourses(yogaCourses.slice(pageNumber * 2 , (pageNumber + 1) * 2))
},[pageNumber]);
//To the next Page
const pageChange = ({selected}) => {
setPageNumber(selected);
}
//levelChangeHandler
const levelChangeHandler = ({value}) => {
setLevel(value);
}
//Filter by Levels // stateless
const filterLevels = (level) => {
return yogaCourses.filter((singleLevel)=> level ? singleLevel.level === level : true);
}
//Function to fetch the data from the API
const GetCourses = async () => {
const response = await axios.get(url)
const {data} = response;
return data;
}
//UseEffect to run the function on every render
useEffect(()=> {
const GetCoursesYoga = async () => {
const result = await GetCourses();
setYogaCourses(result);
setLevels(Array.from(new Set(result.map((result)=> result.level))));
}
GetCoursesYoga();
}, []);
//check if the we got response
useEffect(()=> {
if(yogaCourses.length > 0) {
setIsLoading(false);
}
}, [yogaCourses])
if(isLoading) {
return (
<Loading/>
)
}
else {
return (
<main>
<div className="title">
<h2>YOUR PRACTICE REIMAGINED</h2>
</div>
<LevelsFilter levels={levels} onChange={levelChangeHandler}/>
<YogaCourses yogaCourses= {(filterLevels(level)).slice(0, 2)}/>
<ReactPaginate
previousLabel = {"Previous"}
nextLabel = {"Next"}
pageCount = {pageCount}
onPageChange= {pageChange}
/>
</main>
);
}
}
export default App;
解决方案
推荐阅读
- typescript - 如何安全地访问 TypeScript 中捕获的错误属性?
- python - 来自代码编辑器的 common.py 文件的断言错误
- python - 正确打开 Windows 资源管理器到 PyQt 中的特定路径
- php - 如何在php中处理p7s文件
- azure-data-factory - Azure 数据工厂表达式生成器字符串格式错误:无法识别的令牌(新行)
- ruby - 如何将字符串附加到变量上并将整个事物评估为 Ruby 中的变量?
- ignite - Apache Ignite .Net 2.8.1:与 QueryEntity 的亲和搭配
- python - python aiogram如何停止异步循环
- symfony - 无法与主机“ssl://null:465”建立连接:stream_socket_client():php_network_getaddresses:getaddrinfo 失败
- typescript - 将对象中的子键限制为父键的子类型