react中遇到的分页问题

问题:

1.使用useState时不能够进行当前页码的改变,数据不会随着页码变化

2.删除当前页的最后一条数据时,页码返回上一页但是数据为空

解决:

1.由于useState和useRef的区别那我们就不考虑使用useState

2.再删除的逻辑当中添加判断条件

javascript 复制代码
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>
      {/* 省略其他内容 */}
      <Pagination
        onChange={handlePageChange}
        current={currentPageRef.current}
        // 其他配置项...
      />
    </div>
  );
};

export default YourComponent;

补充:

react中useState、useRef之间的区别

  • useState:
javascript 复制代码
const [state, setState] = useState(0)
const fn = () => {
	setState(1)
	console.log(state) //输出0
}

组件更新不会 改变之前的状态,可以保存状态。

值变化,会render,视图会更新。

setState是异步的,同一个函数内设置的,不能实时获取到最新的值。

  • useRef:
javascript 复制代码
const num = useRef(0)
const fn = () => {
	num.current = 1
	console.log(num.current) //输出1
}

组件更新不会 改变之前的状态,可以保存状态。

值变化,不会render,视图不会更新。

设置的值是同步的,同一个函数内设置的,能实时获取到最新的值。

相关推荐
JarvanMo19 小时前
Flutter. FractionallySizedBox
前端
EndingCoder20 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手20 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评20 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组20 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg1 天前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz1 天前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码1 天前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v1 天前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
Winson℡1 天前
在 React Native 层禁止 iOS 左滑返回(手势返回/手势退出)
react native·react.js·ios