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

react hook ts 实现 列表的滚动分页加载,多参数混合混合搜索

  • InfiniteScroll 的组件见: https://blog.csdn.net/Zhooson/article/details/134396945

  • search.tsx 页面

import { FC, useEffect, useState } from 'react'
import InfiniteScroll from '../../components/InfiniteScroll'const tabs = [{id: 1,title: 'tab-1',index: '1'},{id: 2,title: 'tab-1',index: '2'}
]const DEFAULT_PAGE = {page: 1,limit: 10,total: 0,hasMore: true
}const MyBook: FC = () => {const [tabIndex, setTabIndex] = useState(0)const [pageOption, setPageOption] = useState(DEFAULT_PAGE)const [list, setList] = useState<any>([])const [keywords, setKeywords] = useState()const [shouldFetch, setShouldFetch] = useState(false) // 是否继续fetchconst [loading, setLoading] = useState(false)// 初始化useEffect(() => {getList()}, [])// 条件搜索useEffect(() => {if (shouldFetch) {getList()}}, [shouldFetch])// 接口获取数据async function getList() {setLoading(true)const { limit, page } = pageOptionconst params = {limit,page,statusIds: tabs[tabIndex].index,keywords}await fetchMyBookList(params).then((res) => {if (!res) returnconst newList = list.concat(res.Data.records)setList(newList)setPageOption((prevPageOption) => ({...prevPageOption,hasMore: newList.length < res.Data.total,total: res.Data.total || 0}))setLoading(false)setShouldFetch(false)}).catch(() => {})}// 加载更多async function loadMore() {setPageOption((prevData) => {// 数据异步更新导致if (prevData.hasMore) {setShouldFetch(true)return { ...prevData, page: prevData.page + 1 }} else {return prevData}})}return (<div><input type="text" placeholder="请输入" /><buttononClick={(e) => {setKeywords(e.detail.value)// 搜索时候需要 重置所有参数,包括分页参数setPageOption(DEFAULT_PAGE)setShouldFetch(true)}}>搜索</button><div>{tabs.map((item, index) => {return (<divkey={index}onClick={() => {setTabIndex(index)setList([])setPageOption(DEFAULT_PAGE)setShouldFetch(true)}}>{item.title}</div>)})}</div>{list.length === 0 && !loading && <div>~暂无数据~</div>}{list.length > 0 && (<div>{list.map((_: any, index: number) => {return <div key={index}>{index}</div>})}</div>)}{list.length > 8 && (<InfiniteScroll loadMore={loadMore} hasMore={pageOption.hasMore} />)}</div>)
}export default MyBook

解释: 1. 当前的hook执行都是异步,会不会存在先执行完先渲染? setTabIndex(index), setList([])
, setPageOption(DEFAULT_PAGE)
, setShouldFetch(true)

在React中,状态更新函数(如setPageOptionsetTabIndexsetShouldFetch)是异步的,
这意味着它们不会立即更新状态。然而,React会保证在同一次事件处理函数中的所有状态更新都在同一次渲染中完成。
这就意味着,在searchHandler函数中,setPageOptionsetTabIndexsetShouldFetch的执行顺序是不确定的,
但是它们的状态更新会在同一次渲染中完成。

  1. 为什么引入 setShouldFetch ?

这个搜索页面的,有多个参数,有的参数改变是立刻fetch一下接口,有的参数改变是要点击按钮才能fetch一下,这样导致你在useEffect无法统一检测搜索参数变化。 故引入 setShouldFetch 这个变量,通过检测setShouldFetch的变化,一旦变化就fetch

相关文章:

react hook ts 实现 列表的滚动分页加载,多参数混合混合搜索

InfiniteScroll 的组件见&#xff1a; https://blog.csdn.net/Zhooson/article/details/134396945 search.tsx 页面 import { FC, useEffect, useState } from react import InfiniteScroll from ../../components/InfiniteScrollconst tabs [{id: 1,title: tab-1,index: 1…...

Java应用如何不改代码,调整窗口大小

最近工作上遇到了这个问题&#xff0c;浅浅的研究了一点&#xff0c;这里记录一下。 有不同意见欢迎评论区交流。 需求 项目需求&#xff1a; 客户已经开发好了应用&#xff0c;不过应用在系统上看起来有点小&#xff0c;希望应用能在不修改代码的情况下&#xff0c;通过其他…...

汽车 CAN\CANFD数据记录仪

CAN FD数据记录仪解决汽车电子数据记录与偶发性故障查找问题。 1、脱机离线记录两路CAN/CANFD通道数据 脱机离线记录两路CAN/CANFD通道数据&#xff0c;可记录6个月数据。每个通 道单独设置触发记录模式、触发前预记录报文个数&#xff08;默认1000帧&#xff09;及 过滤规则&a…...

Kafka中topic(主题)、broker(代理)、partition(分区)和replication(副本)它们的关系

在Apache Kafka中&#xff0c;有四个重要的概念&#xff1a;topic&#xff08;主题&#xff09;、broker&#xff08;代理&#xff09;、partition&#xff08;分区&#xff09;和replication&#xff08;副本&#xff09;。它们的关系如下&#xff1a; Topic&#xff08;主题&…...

Mysql字符串类型编码问题

Q: 数据库 Redis 出现 字符比较不一致问题 A:调查后发现在数据库中使用的 account 编码为 utf8mb4_unicode_ci&#xff0c;而这种其实是不区分大小写的&#xff0c;后面我们根据情况&#xff0c;将编码换为 utf8mb4_bin就可以了 参考: utf8mb4_Sageice的博客-CSDN博客 MySQ…...

LabVIEW关于USRPRIO的示例代码

LabVIEW关于USRPRIO的示例代码 USRPRIO 通常以两种方式使用&#xff1a; 1 基于 FPGA 的编程 对于希望修改USRP上的底层FPGA代码以添加自定义DSP模块的应用&#xff0c;请使用USRP示例项目。它可作为构建 USRP RIO 流式处理应用程序的起点&#xff0c;可从“创建项目”对话框…...

【深度学习实验】网络优化与正则化(六):逐层归一化方法——批量归一化、层归一化、权重归一化、局部响应归一化

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、优化算法0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正&#xff1a;动量法Momen…...

低代码编辑平台后台实现

背景 之前做过一个前端低代码编辑平台&#xff0c;可以实现简单的移动端页面组件拖拽编辑&#xff1a; https://github.com/li-car-fei/react-visual-design 最近基于C的oatpp框架实现了一下后台。使用oatpp框架做web后台开发时&#xff0c;发现按照官方的示例使用的话&#…...

c++汉诺塔问题

汉诺塔问题是一个经典的递归问题。基本规则是&#xff0c;给定三个柱子和一些不同大小的盘子&#xff0c;开始时所有盘子按大小顺序堆叠在第一个柱子上&#xff0c;目的是将所有盘子移动到第三个柱子上&#xff0c;并且在移动过程中只能在柱子之间移动一个盘子&#xff0c;并且…...

前端---CSS的样式汇总

文章目录 CSS的样式元素的属性设置字体设置文字的粗细设置文字的颜色文本对齐文本修饰文本缩进行高设置背景背景的颜色背景的图片图片的属性平铺位置大小 圆角矩形 元素的显示模式行内元素和块级元素的转化弹性布局水平方向排列方式&#xff1a;justify-content垂直方向排序方式…...

android适配鸿蒙系统开发

将一个Android应用迁移到鸿蒙系统需要进行细致的工作&#xff0c;因为两者之间存在一些根本性的差异&#xff0c;涉及到代码、架构、界面等多个方面的修改和适配。以下是迁移工作可能涉及的一些主要方面&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专…...

golang学习笔记——select 判断语句

判断语句 Go 语言提供了以下几种条件判断语句&#xff1a; 语句描述if 语句if 语句 由一个布尔表达式后紧跟一个或多个语句组成。if…else 语句if 语句 后可以使用可选的 else 语句, else 语句中的表达式在布尔表达式为 false 时执行。if 嵌套语句你可以在 if 或 else if 语句…...

FLMix: 联邦学习新范式——局部和全局的结合

文章链接&#xff1a;Federated Learning of a Mixture of Global and Local Models 发表期刊&#xff08;会议&#xff09;: ICLR 2021 Conference&#xff08;机器学习顶会&#xff09; 目录 1. 背景介绍2. 传统联邦学习3. FL新范式理论逻辑重要假设解的特性 本博客从优化函…...

为什么嵌入式没有35岁危机?

为什么嵌入式没有35岁危机? 在当今数字化时代&#xff0c;IT行业变化迅速&#xff0c;技术的更新迭代速度惊人。然而&#xff0c;有一个技术领域却能够在这个竞争激烈的行业中稳步前行&#xff0c;而且不受35岁危机所困扰&#xff0c;那就是嵌入式技术。 嵌入式技术是指将计算…...

PostgreSQL设置主键从1开始自增

和MySQL不同&#xff0c;在 PostgreSQL 中&#xff0c;设置主键从1开始自增并重新开始自增是通过序列&#xff08;sequence&#xff09;来实现的。以下是步骤&#xff1a; 步骤1&#xff1a;创建一个序列 CREATE SEQUENCE your_table_id_seqSTART 1INCREMENT 1MINVALUE 1MAXV…...

Vue数据绑定

在我们Vue当中有两种数据绑定的方法 1.单向绑定 2.双向绑定 让我为大家介绍一下吧&#xff01; 1、单向绑定(v-bind) 数据只能从data流向页面 举个例子&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"…...

js写轮播图,逐步完善

目录 1、自动轮播 2、点击更换 3、自动播放加左右箭头点击切换 4、完整版轮播图 1、自动轮播 用定时器setInterval()来写&#xff0c;可以实现自动播放 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><met…...

算法-链表-简单-相交、反转、回文、环形、合并

记录一下算法题的学习5 在写关于链表的题目之前&#xff0c;我们应该熟悉回忆一下链表的具体内容 什么是链表&#xff1a; 链表&#xff08;Linked list&#xff09;是一种常见的基础数据结构&#xff0c;是一种线性表&#xff0c;但是并不会按线性的顺序存储数据&#xff0c…...

【500强 Kubernetes 课程】第3章 运行docker容器

一 - 三 &#xff0c;docker基础操作见 第2章7节 四、docker部署web网站 1、安装 nginx &#xff08;适合场景&#xff1a;学习 - 略&#xff09; 2、docker 安装 nginx Stage 1 &#xff1a;docker hub 上 搜索 nginx 镜像 Stage 2&#xff1a;拉取官方镜像 Stage 3&…...

Python中表格插件Tabulate的用法

目录 一、引言 二、Tabulate插件安装与导入 三、Tabulate基本用法 1、创建表格&#xff1a; 2. 格式化表格&#xff1a; 3. 表格转置&#xff1a; 4、合并单元格&#xff1a; 5、指定每列的格式&#xff1a; 6、指定每行的格式&#xff1a; 7、使用自定义表格格式&am…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...

深入理解 React 样式方案

React 的样式方案较多,在应用开发初期,开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有: 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中,均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观,适合动态样式和…...

【java】【服务器】线程上下文丢失 是指什么

目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失&#xff1f; 直观示例说明 为什么上下文如此重要&#xff1f; 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程&#xff0c;代码应该如何实现 推荐方案&#xff1a;使用 ManagedE…...