当前位置: 首页 > news >正文

react中遇到的分页问题

问题:
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,视图不会更新。
设置的值是同步的,同一个函数内设置的,能实时获取到最新的值。

相关文章:

react中遇到的分页问题

问题&#xff1a; 1.使用useState时不能够进行当前页码的改变&#xff0c;数据不会随着页码变化 2.删除当前页的最后一条数据时&#xff0c;页码返回上一页但是数据为空 解决&#xff1a; 1.由于useState和useRef的区别那我们就不考虑使用useState 2.再删除的逻辑当中添加判断条…...

变电站自动化系统中的安全措施分析及应用-安科瑞

安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;阐述变电运行中的问题&#xff0c;电气自动化系统与安全运行措施&#xff0c;包括自动控制设备的投入&#xff0c;电气自动 化与计算机技术相、设备数据的采集与处理、自动化系统的升级、人工智能技术的应用。 关键…...

【MongoDB】索引 – 文本索引

一、准备工作 这里准备一些数据 db.books.insertMany([{_id: 1, name: "Java", description: "java 入门图书", translation: [{ language: "english", description: "java basic book" }]},{_id: 2, name: "C", descript…...

【广州华锐互动】影视制作VR在线学习:身临其境,提高学习效率

随着科技的不断发展&#xff0c;影视后期制作技术也在日新月异。然而&#xff0c;传统的教学方式往往难以满足学员的学习需求&#xff0c;无法充分展现影视后期制作的魅力和潜力。近年来&#xff0c;虚拟现实(VR)技术的崛起为教学领域带来了新的机遇。通过VR教学课件&#xff0…...

Linux 命令:PS(进程状态)

1. 写在前面 本文主要介绍&#xff1a;Linux 下常用命令 PS —— 进程状态&#xff1b; 公众号&#xff1a; 滑翔的纸飞机 2. PS — 介绍&#xff08;进程状态&#xff09; ps 命令&#xff1a;显示 Linux 系统中运行进程有关的信息。 rootdev:~# psPID TTY TIME C…...

手把手教你:LLama2原始权重转HF模型

LLama2是meta最新开源的语言大模型&#xff0c;训练数据集2万亿token&#xff0c;上下文长度由llama的2048扩展到4096&#xff0c;可以理解和生成更长的文本&#xff0c;包括7B、13B和70B三个模型&#xff0c;在各种基准集的测试上表现突出&#xff0c;该模型可用于研究和商业用…...

后入能先出,一文搞懂栈

目录 什么是栈数组实现链表实现栈能这么玩总结 什么是栈 栈在我们日常编码中遇到的非常多&#xff0c;很多人对栈的接触可能仅仅局限在 递归使用的栈 和 StackOverflowException&#xff0c;栈是一种后进先出的数据结构(可以想象生化金字塔的牢房和生化角斗场的狗洞)。 栈&…...

京东API接口的应用场景:商品信息查询,商品详情获取

京东API接口的应用场景涵盖了电商业务的各个方面&#xff0c;通过API的方式&#xff0c;开发者可以方便地获取京东平台上的商品信息、用户信息、订单信息等&#xff0c;进而进行个性化的应用开发。以下是几个典型的应用场景&#xff1a; 商品信息查询&#xff1a;通过京东API接…...

微信小程序使用iconfont坑

下载解压 font-face {font-family: "iconfont"; /* Project id 4322044 */src: url(iconfont.woff2?t1699515502419) format(woff2),url(iconfont.woff?t1699515502419) format(woff),url(iconfont.ttf?t1699515502419) format(truetype); }.iconfont {font-famil…...

最新Cocos Creator 3.x 如何动态修改3D物体的透明度

Cocos Creator 3.x 的2D UI有个组件UIOpacity组件可以动态修改UI的透明度,非常方便。很多同学想3D物体上也有一个这样的组件来动态的控制与修改3D物体的透明度。今天基于Cocos Creator 3.8 来实现一个可以动态修改3D物体透明度的组件Opacity3D。 对啦&#xff01;这里有个游戏…...

golang 2018,go 1.19安装Gin

GOPROXYhttps://mirrors.aliyun.com/goproxy/ 一致提示URL不能有点&#xff0c;给我整郁闷了&#xff0c;换了这个地址好了 但是一致提示zip的包问题&#xff0c;最后还是不行又换回七牛 NEWBEE&#xff01; [GIN-debug] Environment variable PORT is undefined. Using por…...

常用的三角函数公式

sin ⁡ 2 x cos ⁡ 2 x 1 \sin ^2 x \cos ^2 x 1 sin2xcos2x1 tan ⁡ x sin ⁡ x cos ⁡ x \tan x \dfrac{\sin x}{\cos x} tanxcosxsinx​ cot ⁡ x 1 tan ⁡ x cos ⁡ x sin ⁡ x \cot x \dfrac{1}{\tan x}\dfrac{\cos x}{\sin x} cotxtanx1​sinxcosx​ sec …...

【MySQL】一文学会所有MySQL基础知识以及基本面试题

文章目录 前言 目录 文章目录 前言 一、主流数据库以及如何登陆数据库 二、常用命令使用 三、SQL分类 3.1 存储引擎 四、创建数据库如何设置编码等问题 4.1操纵数据库 4.2操纵表 五、数据类型 六、表的约束 七、基本查询 八、函数 九、复合查询 十、表的内连和外连 十一、索引…...

self.register_buffer方法使用解析(pytorch)

self.register_buffer就是pytorch框架用来保存不更新参数的方法。 列子如下&#xff1a; self.register_buffer("position_emb", torch.randn((5, 3)))第一个参数position_emb传入一个字符串&#xff0c;表示这组参数的名字&#xff0c;第二个就是tensor形式的参数…...

关于卷积神经网络中如何计算卷积核大小(kernels)

首先需要说明的一点是&#xff0c;虽然卷积层得名于卷积&#xff08; convolution &#xff09;运算&#xff0c;但我们通常在卷积层中使用更加直观的计算方式&#xff0c;叫做互相关&#xff08; cross-correlation &#xff09;运算。 也就是说&#xff0c;其实我们现在在这里…...

python使用selenium做自动化,最新版Chrome与chromedriver不兼容

目前Chrome版本是118.0.5993.118 下方是版本对应的下载地址&#xff1a; chrome版本118&#xff1a; https://download.csdn.net/download/qq_35845339/88510476 chrome版本119&#xff1a; chromedriverlinux64https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testin…...

算法进阶指南图论 通信线路

通信线路 思路&#xff1a;我们考虑需要升级的那条电缆的花费&#xff0c;若其花费为 w &#xff0c;那么从 1 到 n 的路径上&#xff0c;至多存在 k 条路径的价值大于 w &#xff0c;这具有一定的单调性&#xff0c;当花费 w 越大&#xff0c;我们路径上价值大于 w 的花费会越…...

【QEMU-tap-windows-Xshell】QEMU 创建 aarch64虚拟机(附有QEMU免费资源)

“从零开始&#xff1a;在Windows上创建aarch64&#xff08;ARM64&#xff09;虚拟机” 前言 aarch64&#xff08;ARM64&#xff09;架构是一种现代的、基于 ARM 技术的计算架构&#xff0c;具有诸多优点&#xff0c;如低功耗、高性能和广泛应用等。为了在 Windows 平台上体验…...

strtok函数详解:字符串【分割】的利器

目录 一&#xff0c;strtok函数简介 二&#xff0c;strtok函数的用法 三&#xff0c;strtok函数的注意事项 一&#xff0c;strtok函数简介 strtok函数可以帮助我们将一个字符串按照指定的分隔符进行分割&#xff0c;从而得到我们想要的子字符串。 &#x1f342;函数头文件&am…...

winui3开发笔记(二)自定义标题栏

参考文章链接&#xff1a;https://www.programminghunter.com/article/46392310600/ 注意事项 获取 AppWindowTitleBar 的实例并设置其颜色属性时&#xff0c;InitializeTitleBar(AppWindow.TitleBar);&#xff0c;只适用于Windows App SDK 1.2及以上&#xff0c;所以如果用w…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...