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中遇到的分页问题
问题: 1.使用useState时不能够进行当前页码的改变,数据不会随着页码变化 2.删除当前页的最后一条数据时,页码返回上一页但是数据为空 解决: 1.由于useState和useRef的区别那我们就不考虑使用useState 2.再删除的逻辑当中添加判断条…...
变电站自动化系统中的安全措施分析及应用-安科瑞
安科瑞电气股份有限公司 上海嘉定 201801 摘要:阐述变电运行中的问题,电气自动化系统与安全运行措施,包括自动控制设备的投入,电气自动 化与计算机技术相、设备数据的采集与处理、自动化系统的升级、人工智能技术的应用。 关键…...
【MongoDB】索引 – 文本索引
一、准备工作 这里准备一些数据 db.books.insertMany([{_id: 1, name: "Java", description: "java 入门图书", translation: [{ language: "english", description: "java basic book" }]},{_id: 2, name: "C", descript…...
【广州华锐互动】影视制作VR在线学习:身临其境,提高学习效率
随着科技的不断发展,影视后期制作技术也在日新月异。然而,传统的教学方式往往难以满足学员的学习需求,无法充分展现影视后期制作的魅力和潜力。近年来,虚拟现实(VR)技术的崛起为教学领域带来了新的机遇。通过VR教学课件࿰…...
Linux 命令:PS(进程状态)
1. 写在前面 本文主要介绍:Linux 下常用命令 PS —— 进程状态; 公众号: 滑翔的纸飞机 2. PS — 介绍(进程状态) ps 命令:显示 Linux 系统中运行进程有关的信息。 rootdev:~# psPID TTY TIME C…...
手把手教你:LLama2原始权重转HF模型
LLama2是meta最新开源的语言大模型,训练数据集2万亿token,上下文长度由llama的2048扩展到4096,可以理解和生成更长的文本,包括7B、13B和70B三个模型,在各种基准集的测试上表现突出,该模型可用于研究和商业用…...
后入能先出,一文搞懂栈
目录 什么是栈数组实现链表实现栈能这么玩总结 什么是栈 栈在我们日常编码中遇到的非常多,很多人对栈的接触可能仅仅局限在 递归使用的栈 和 StackOverflowException,栈是一种后进先出的数据结构(可以想象生化金字塔的牢房和生化角斗场的狗洞)。 栈&…...
京东API接口的应用场景:商品信息查询,商品详情获取
京东API接口的应用场景涵盖了电商业务的各个方面,通过API的方式,开发者可以方便地获取京东平台上的商品信息、用户信息、订单信息等,进而进行个性化的应用开发。以下是几个典型的应用场景: 商品信息查询:通过京东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。 对啦!这里有个游戏…...
golang 2018,go 1.19安装Gin
GOPROXYhttps://mirrors.aliyun.com/goproxy/ 一致提示URL不能有点,给我整郁闷了,换了这个地址好了 但是一致提示zip的包问题,最后还是不行又换回七牛 NEWBEE! [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} cotxtanx1sinxcosx sec …...
【MySQL】一文学会所有MySQL基础知识以及基本面试题
文章目录 前言 目录 文章目录 前言 一、主流数据库以及如何登陆数据库 二、常用命令使用 三、SQL分类 3.1 存储引擎 四、创建数据库如何设置编码等问题 4.1操纵数据库 4.2操纵表 五、数据类型 六、表的约束 七、基本查询 八、函数 九、复合查询 十、表的内连和外连 十一、索引…...
self.register_buffer方法使用解析(pytorch)
self.register_buffer就是pytorch框架用来保存不更新参数的方法。 列子如下: self.register_buffer("position_emb", torch.randn((5, 3)))第一个参数position_emb传入一个字符串,表示这组参数的名字,第二个就是tensor形式的参数…...
关于卷积神经网络中如何计算卷积核大小(kernels)
首先需要说明的一点是,虽然卷积层得名于卷积( convolution )运算,但我们通常在卷积层中使用更加直观的计算方式,叫做互相关( cross-correlation )运算。 也就是说,其实我们现在在这里…...
python使用selenium做自动化,最新版Chrome与chromedriver不兼容
目前Chrome版本是118.0.5993.118 下方是版本对应的下载地址: chrome版本118: https://download.csdn.net/download/qq_35845339/88510476 chrome版本119: chromedriverlinux64https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testin…...
算法进阶指南图论 通信线路
通信线路 思路:我们考虑需要升级的那条电缆的花费,若其花费为 w ,那么从 1 到 n 的路径上,至多存在 k 条路径的价值大于 w ,这具有一定的单调性,当花费 w 越大,我们路径上价值大于 w 的花费会越…...
【QEMU-tap-windows-Xshell】QEMU 创建 aarch64虚拟机(附有QEMU免费资源)
“从零开始:在Windows上创建aarch64(ARM64)虚拟机” 前言 aarch64(ARM64)架构是一种现代的、基于 ARM 技术的计算架构,具有诸多优点,如低功耗、高性能和广泛应用等。为了在 Windows 平台上体验…...
strtok函数详解:字符串【分割】的利器
目录 一,strtok函数简介 二,strtok函数的用法 三,strtok函数的注意事项 一,strtok函数简介 strtok函数可以帮助我们将一个字符串按照指定的分隔符进行分割,从而得到我们想要的子字符串。 🍂函数头文件&am…...
winui3开发笔记(二)自定义标题栏
参考文章链接:https://www.programminghunter.com/article/46392310600/ 注意事项 获取 AppWindowTitleBar 的实例并设置其颜色属性时,InitializeTitleBar(AppWindow.TitleBar);,只适用于Windows App SDK 1.2及以上,所以如果用w…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码,写上注释 当然可以!这段代码是 Qt …...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
YSYX学习记录(八)
C语言,练习0: 先创建一个文件夹,我用的是物理机: 安装build-essential 练习1: 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件,随机修改或删除一部分,之后…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
