React查询、搜索类功能的实现

简介: React查询、搜索类功能的实现

React查询、搜索类功能的实现

查询之类的如果是通过向列表接口中发送对应参数来查询的,那么在默认输出时,在useEffect钩子中的请求中可以先为需要查询的请求参数设初始的state,也就是null或者未定义,这样的话初始请求的还是整个列表,然后将这些state放入useEffect的依赖中,也就是第二个参数的数组中,然后在一些查询相关的组件中,如下拉选项、Search搜索框、时间选择器等,具体根据可查询项决定,然后更新初始设置的state,set为在这些组件的事件函数中将组件筛选的最终值。因为useEffect监听到了这些状态发生的变化,所以重复执行了,重新调用了接口并传递了筛选参数,列表状态也发生了改变,就完成了查询的功能。

以下为下拉选项实例:

请求函数部分:

 const [tableList, setTableList] = useState([]);
 const [status, setStatus] = useState();
 const [title, setTitle] = useState();
useEffect(() => {
   axios.get('http://crmeb.kuxia.top/adminapi/cms/category',{
     status: status,
     title: title
    }).then((res) => {
      setTableList(res.data.list);
    });
  }, [status, title]);//将sataus设为依赖
<Select
   options={[
       { label: '全部', value: null },
       { label: '显示', value: 1 },
       { label: '不显示', value: 0 },
    ]}
     onChange={(value) => {
         setStatus(value);//更改了status的状态触发了useEffect重新执行并发送了状态参数完成筛选查询
      }}/>


目录
相关文章
|
前端开发 测试技术 容器
React 快速实现拖拽改变容器宽高度
React 快速实现拖拽改变容器宽高度
997 0
|
12月前
|
数据采集 监控 安全
拼多多API价格战预警:竞品监控不落人后!
在电商竞争激烈的当下,拼多多凭借低价策略迅速崛起,但也给商家带来定价挑战。本文解析如何利用API技术,构建实时价格预警与竞品监控系统,助力商家在价格战中抢占先机,实现智能调价与策略应对。
|
机器学习/深度学习 编解码 算法
什么是超分辨率?浅谈一下基于深度学习的图像超分辨率技术
超分辨率技术旨在提升图像或视频的清晰度,通过增加单位长度内的采样点数量来提高空间分辨率。基于深度学习的方法,如SRCNN、VDSR、SRResNet等,通过卷积神经网络和残差学习等技术,显著提升了图像重建的质量。此外,基于参考图像的超分辨率技术通过利用高分辨率参考图像,进一步提高了重建图像的真实感和细节。
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件,涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法,以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧,提升应用的性能和用户体验。
594 3
|
JavaScript 前端开发 API
使用ArkUI封装表单
本文介绍了如何使用华为鸿蒙系统的声明式UI框架ArkUI封装表单。主要内容包括创建自定义组件、实现验证逻辑、在父组件中使用自定义表单组件,以及样式和布局的设置。通过这些步骤,可以提高代码的可复用性和模块化程度,使表单构建更加高效和易于维护。
509 3
|
SQL 关系型数据库 MySQL
MySQL DDL(数据定义语言)深度解析
MySQL DDL(数据定义语言)深度解析
|
调度 索引
NR PUCCH(一) PUCCH format 0/1
NR中PUCCH物理信道用来发送上行控制信息Uplink Control Information(UCI),当然UCI也可以在PUSCH上发送。UCI 内容包括:CSI,HARQ ACK/NACK ,SR 及上述三者的组合信息。
|
Dart Android开发 iOS开发
Flutter 弃用 WillPopScope 使用 PopScope 替代方法
了解如何在 Flutter 3.16 中将弃用的 WillPopScope 替换为 PopScope,并学习如何升级您的 Flutter 应用程序。详细指南和最佳实践,帮助您顺利迁移和更新您的导航逻辑。
918 7
Flutter 弃用 WillPopScope 使用 PopScope 替代方法
|
Web App开发 监控 算法
详解 WebRTC 高音质低延时的背后 — AGC(自动增益控制)
本文将结合实例全面解析 WebRTC AGC 的基本框架,一起探索其基本原理、模式的差异、存在的问题以及优化方向。
详解 WebRTC 高音质低延时的背后 — AGC(自动增益控制)
|
前端开发 JavaScript API
构建高效Web应用:React与Node.js的完美结合
【8月更文挑战第29天】在当今快速变化的软件开发领域,构建高性能、可扩展的Web应用成为开发者的首要任务。本文将深入探讨如何利用React和Node.js这两大技术栈,打造一个高效且响应迅速的现代Web应用。从前端的用户界面设计到后端的服务逻辑处理,我们将一步步分析这两种技术如何协同工作,提升应用性能,并确保用户体验的流畅性。通过实际代码示例和架构设计的解析,本篇文章旨在为读者提供一套清晰的指南,帮助他们在项目开发中做出更明智的技术选择。