深圳网站设计公司如何,个人创业做网站,市场营销策划案的范文,网站开发和前端是一样吗问题#xff1a; 1.使用useState时不能够进行当前页码的改变#xff0c;数据不会随着页码变化 2.删除当前页的最后一条数据时#xff0c;页码返回上一页但是数据为空 解决#xff1a; 1.由于useState和useRef的区别那我们就不考虑使用useState 2.再删除的逻辑当中添加判断条…问题 1.使用useState时不能够进行当前页码的改变数据不会随着页码变化 2.删除当前页的最后一条数据时页码返回上一页但是数据为空 解决 1.由于useState和useRef的区别那我们就不考虑使用useState 2.再删除的逻辑当中添加判断条件
import React, { useRef } from react;
import { Pagination } from antd;const YourComponent () {const currentPageRef useRef(1); // 使用 useRef 来保存当前页码 可以为空const handlePageChange (page) {console.log(page, pageeeee);getMessage(page);currentPageRef.current page; // 更新当前页码};const handleDelete (id) {// 执行删除操作// 删除成功后判断当前页是否还有数据// 如果没有数据且不是第一页则回退到上一页if (data.length 1 currentPageRef.current 1) {const newPage currentPageRef.current - 1; // 计算上一页的页码getMessage(newPage); // 获取上一页的数据currentPageRef.current newPage; // 更新当前页码为上一页} else {getMessage(currentPageRef.current); // 否则重新请求当前页的数据}};return (div{/* 省略其他内容 */}PaginationonChange{handlePageChange}current{currentPageRef.current}// 其他配置项...//div);
};export default YourComponent;
补充
react中useState、useRef之间的区别
useState
const [state, setState] useState(0)
const fn () {setState(1)console.log(state) //输出0
}组件更新不会改变之前的状态可以保存状态。 值变化会render视图会更新。 setState是异步的同一个函数内设置的不能实时获取到最新的值。
useRef
const num useRef(0)
const fn () {num.current 1console.log(num.current) //输出1
}
组件更新不会改变之前的状态可以保存状态。 值变化不会render视图不会更新。 设置的值是同步的同一个函数内设置的能实时获取到最新的值。
