React 列表页实现

一、介绍

        列表页是常用的功能,从后端获取列表数据,刷新到页面上。开发列表页需要考虑以下技术要点:1.如何翻页;2.如何进行内容搜索;3.何时进行页面刷新。

二、使用教程

1.user-service

根据用户id获取用户列表,返回的state包括列表响应,加载状态,请求错误等信息。

const useFetchUserList = () => {// useRequest Hookconst [state, doRequest] = useRequest();// useAuth hookconst [user] = useAuth(); // 发起请求const fetch = (userId, page, pageSize) => doRequest('http://vicyor.com/user/'+userId, {page:page,pageSize:pageSize},{authorization:user.token}, 'POST' );// 返回结果return {state, fetch}
}

demo

export const ListPage = () =>{const [search, setSearch] = useState('');const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(10);const [state, fetch] = useFetchUserList();const handleSearch = keyword => fetch(keyword, page, pageSize);useEffect( () => {fetch('', 1, pageSize);},[])    return (<><div><h2>User List</h2><Input.Searchvalue={search}onChange={e => setSearch( e.target.value )}onSearch={handleSearch}/><TabledataSource={state.data}columns={getColumns()}rowKey="id"loading={state.isLoading}error = {state.error}pagination={true}/><Paginationcurrent={page}total={state.total}update = {setPage, setPageSize}/></div></>);}

2. province-city-service

省份和城市服务,选择省份后选择对应的城市

const useProvinceAndCity = () => {const [fetchProvince, provincesState] =  useRequest('http://vicyor.com/province/list',{},{},'GET');const [fetchCitys, citysState] = useRequest('http://vicyor.com/' + province + '/cityes', {}, {}, 'POST');return {fetchProvince, fetchCitys, provincesState, citysState};}

demo


const CitySelector = () => {const [selectedProvince, setSelectedProvince] = useState('');const [selectedCity, setSelectedCity] = useState('');const [fetchProvince, fetchCitys, provincesState, citysState] = useProvinceAndCitys();// 初始加载所有省份useEffect(() => {fetchProvince();},[])const handleProvinceChange = (e) => {setSelectedProvince(e.target.value);// 加载所有城市fetchCitys(selectedProvince);};const handleCityChange = (e) => {setSelectedCity(e.target.value);};return (<div><select value={selectedProvince} onChange={handleProvinceChange}><option value ="">请选择省份<option>provincesState.res && provincesState.res.map(province => <option value= {province.name}>{province.name}</option>)</select><select value={selectedCity} onChange={handleCityChange}><option value="">请选择城市</option>citysState.res && citysState.res.map(city => <option value = {city.name}>{city.name}</city></select></div>);
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/219376.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Spring】02 Bean 的命名

文章目录 1. 定义2. 使用优势3. 如何命名4. 注解驱动5. 最佳实践1&#xff09;使用明确的业务名词2&#xff09;避免缩写和首字母缩略词2&#xff09;不要过度使用别名 结语 在 Spring 框架中&#xff0c;Bean 是应用程序中的主要组件&#xff0c;负责承载和管理应用的核心功能…

【python-wrf】绘制wrf中的土地利用报错内容及其解决方法

从该代码处绘制wrf中的土地利用报错内容及其解决方法 1.报错内容&#xff1a; 微信公众平台 (qq.com)https://mp.weixin.qq.com/s/Cn0vhvfroVADPnT237LXNw --------------------------------------------------------------------------- AttributeError …

14--常用类和基础API--04

1、Arrays类 1.1 Arrays类概述 java.util.Arrays 此类包含用来操作数组的各种方法&#xff0c;比如排序和搜索等。其所有方法均为静态方法&#xff0c;调用起来非常简单。简单来说&#xff1a;Arrays这个是专门用来操作数组相关的工具类 1.2 Arrays类常用方法 public static…

OkHttp: 使用入门

文章目录 1. 领域对象1. Request2. Response2.1 请求重写2.2 重写返回2.3 跟踪请求2.4 自动重试 3. Calls 2. 创建连接1、URLs2、Addresses3、Routes4、Connections 3. 使用案例1、同步GET请求2、异步GET请求3、发送和读取HTTP头4、POST 字符传5、POST 流6、POST 文件内容7、PO…

mysql 字符串合并方法以及合并为null问题

concat()不推荐 mysql一般提供了两种一种是concat()函数一种是concat_ws()函数&#xff0c;前者合并字符串有个弊端&#xff0c;合并字段不能有null值&#xff0c; 否则如下图合并后会是null concat_ws()推荐 concat_ws()函数可以解决合并字符串为null问题&#xff0c;conca…

Go并发编程:保障安全与解锁奥秘

一、并发安全与锁 1、并发安全 有时候在 Go 代码中可能会存在多个 goroutine 同时操作一个资源&#xff08;临界区&#xff09;&#xff0c;这种情况会发生竞态问题&#xff08;数据竞态&#xff09;类比现实生活中的例子有十字路口被各个方向的汽车竞争&#xff1b;还有火车…

使用Microsoft Dynamics AX 2012 - 8. 财务管理

财务管理的主要职责是控制和分析与货币金额有关的所有交易。这些事务发生在整个组织的业务流程中。 因此&#xff0c;财务管理是企业管理解决方案的核心领域。在Dynamics AX中&#xff0c;支持所有部门业务流程的应用程序的深度集成可立即提供准确的财务数据。 分类账交易的原…

K8S(三)—组件

目录 k8s组件控制平面组件&#xff08;Control Plane Componentskube-apiserveretcdkube-schedulerkube-controller-managercloud-controller-managerNode 组件kubelet&#xff08;单独的进程&#xff09;kube-proxy&#xff08;单独的进程&#xff09;容器运行时&#xff08;C…

Redis常问面试题

Redis常问面试题 Redis常问面试题1、Redis 支持哪几种数据类型&#xff1f;2、Redis 做登录是怎么实现的&#xff1f;和传统session有何区别&#xff1f;3、什么是缓存穿透&#xff1f;4、什么是缓存雪崩&#xff1f;5、什么是缓存击穿&#xff1f;6、Redis高可用的几种实现方式…

12.13每日一题(备战蓝桥杯快速排序)

12.13每日一题&#xff08;备战蓝桥杯快速排序&#xff09; 题目 快速排序 给定你一个长度为 n 的整数数列。 请你使用快速排序对这个数列按照从小到大进行排序。 并将排好序的数列按顺序输出。 输入格式 输入共两行&#xff0c;第一行包含整数 n。 第二行包含 n 个整数&…

MySQL 中Relay Log打满磁盘问题的排查方案

MySQL 中Relay Log打满磁盘问题的排查方案 引言&#xff1a; MySQL Relay Log&#xff08;中继日志&#xff09;是MySQL复制过程中的一个重要组件&#xff0c;它用于将主数据库的二进制日志事件传递给从数据库。然而&#xff0c;当中继日志不断增长并最终占满磁盘空间时&…

实操Nginx(4层代理+7层代理)+Tomcat多实例部署,实现负载均衡和动静分离

目录 前言 一、tomcat多实例部署 步骤一&#xff1a;先安装jdk&#xff0c;设置jdk的环境变量&#xff0c;验证是否安装完成&#xff08;192.168.20.8&#xff09; 步骤二&#xff1a;安装tomcat&#xff08;192.168.20.18&#xff09; 步骤三&#xff1a;安装tomcat多实例…

快速上手linux | 一文秒懂Linux各种常用目录命令(上)

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 一 、命令提示符和命令的基本格式1.1 如何查看主机名称及修改 二、命令基本格式2.1 命令格式示例2.2 参数的作用…

Spring Cloud gateway - CircuitBreaker GatewayFilte

前面学习Spring cloud gateway的时候&#xff0c;做测试的过程中我们发现&#xff0c;Spring Cloud Gateway不需要做多少配置就可以使用Spring Cloud LoadBalance的功能&#xff0c;比如&#xff1a; spring:application:name: spring-gatewaycloud:gateway:routes:- id: path…

java并发-ReentrantReadWriteLock读写锁

文章目录 介绍读写锁的获取规则示例源码解读ReentrantReadWriteLock核心变量ReentrantReadWriteLock相关属性和构造函数Sync静态内部类的核心属性tryAcquireShared方法tryAcquire方法锁降级 总结 介绍 读写锁就是将一个锁拆分为读锁和写锁两个锁。 读写锁的获取规则 如果有一…

33KB代码实现短网址(php+mysql) V2.0

查立得短网址 V2.0 请保留署名信息;请勿用于非法用途 系统简述&#xff1a;三五十KB代码实现短网址功能前后端都登陆,相对第一版代码已重构。 开发环境&#xff1a;宝塔:linux php Nginx 7.1/mysql5.6;建议环境&#xff1a;linux php 5.4-7.3; 空间域名&#xff1a;域名解析到对…

ELK简单介绍二

学习目标 能够部署kibana并连接elasticsearch集群能够通过kibana查看elasticsearch索引信息知道用filebeat收集日志相对于logstash的优点能够安装filebeat能够使用filebeat收集日志并传输给logstash kibana kibana介绍 Kibana是一个开源的可视化平台,可以为ElasticSearch集群…

电子取证中Chrome各版本解密Cookies、LoginData账号密码、历史记录

文章目录 1.前置知识点2.对于80.X以前版本的解密拿masterkey的几种方法方法一 直接在目标机器运行Mimikatz提取方法二 转储lsass.exe 进程从内存提取masterkey方法三 导出SAM注册表 提取user hash 解密masterkey文件&#xff08;有点麻烦不太推荐&#xff09;方法四 已知用户密…

插入算法(C语言)

#include<cstdio> #include<iostream> #define N 9 using namespace std; int main() {int arr[N1] { 1,4,7,13,16,19,22,25,280 }; int in,i,j;//要插入的数字//打印要插入数字的数组所有元素printf("插入前的数组: ");for ( i 0; i <N; i){print…

STM32G030C8T6:使用外部晶振配置LED灯闪烁

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;使用STM32G030C8T6单片机&#xff0c;通过STM32CubeMX软件&#xff0c;配置并使用外部8MHz晶振&#xff0c;实…