【ProComponents】解决 ProTable 中 params 参数改变,request 函数未触发问题

文章目录

  1. 先建议自查下官方文档,了解paramsrequest直接的关系

在这里插入图片描述

  1. 确定params绑定的参数是否改变,例如 user_name 参数
import { ProTable, WxIcon } from '@/components';
import { getSearchParams } from 'ice';
import { useEffect, useMemo, useRef, useState } from 'react';
import store from '@/store';

export default function (props) {
  const searchParams = getSearchParams();
  const [selectValue, setSelectValue] = useState({
    a: 'user',
    b: undefined,
    c: null,
    user_name: null,
  });
  useEffect(() => {
    setSelectValue({ ...selectValue, user_name: searchParams.user_name});
    // 这里监听 user_name 是否发生了改变
    console.log('user_name = ', searchParams.user_name)
  }, [searchParams.user_name]);

  return (
    <>
      <ProTable
        {/* ...这里做了代码省略,只保留关键属性 */}
        params={{
          ...selectValue,
        }}
        request={async (params) => {
            console.log('参数 =', params);

            const data = await get_list({...省略});
            return {
              data,
              success: true,
              total: data.total,
            };
          }
        }
      />
    </>
  );
}
  1. 如果user_name 参数发生改变,且能正常监听,那导致request 未触发的原因就是:
  • params 更新频率过高,导致 ProTable 来不及及时更新,这时候request 采用节流或防抖就可以了
  • debouncelodash工具库中的防抖函数,也可以通过 js 原生去写防抖
import { ProTable, WxIcon } from '@/components';
import { getSearchParams } from 'ice';
import { useEffect, useMemo, useRef, useState } from 'react';
import store from '@/store';
import { debounce } from 'lodash';

export default function (props) {
  const searchParams = getSearchParams();
  const [selectValue, setSelectValue] = useState({
    a: 'user',
    b: undefined,
    c: null,
    user_name: null,
  });
  useEffect(() => {
    setSelectValue({ ...selectValue, user_name: searchParams.user_name});
    // 这里监听 user_name 是否发生了改变
    console.log('user_name = ', searchParams.user_name)
  }, [searchParams.user_name]);

  return (
    <>
      <ProTable
        {/* ...这里做了代码省略,只保留关键属性 */}
        params={{
          ...selectValue,
        }}
        request={
          debounce(async (params) => {
            console.log('参数 =', params);

            const data = await get_list({...省略});
            return {
              data,
              success: true,
              total: data.total,
            };
          }, 800)
        }
      />
    </>
  );
}

在这里插入图片描述

  • 如果上面方法仍未解决,可以参考下面这个,给params添加useMemo
  • params 提到 useMemo 中,可以避免每次 render 都触发创建一个新 params 对象导致不必要的更新
import { ProTable, WxIcon } from '@/components';
import { getSearchParams } from 'ice';
import { useEffect, useMemo, useRef, useState } from 'react';
import store from '@/store';

export default function (props) {
  const searchParams = getSearchParams();
  const [selectValue, setSelectValue] = useState({
    a: 'user',
    b: undefined,
    c: null,
    user_name: null,
  });
  useEffect(() => {
    setSelectValue({ ...selectValue, user_name: searchParams.user_name});
    // 这里监听 user_name 是否发生了改变
    console.log('user_name = ', searchParams.user_name)
  }, [searchParams.user_name]);
  
  const params = useMemo(()=>({
  	...selectValue,
  }),[selectValue])

  return (
    <>
      <ProTable
        {/* ...这里做了代码省略,只保留关键属性 */}
        params={params}
        request={async (params) => {
            console.log('参数 =', params);

            const data = await get_list({...省略});
            return {
              data,
              success: true,
              total: data.total,
            };
          }
        }
      />
    </>
  );
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智慧公厕是什么?智慧公厕的主要功能、特点?

智慧公厕&#xff0c;顾名思义&#xff0c;是指应用了智能科技的公共厕所&#xff0c;旨在提供更加便捷、舒适、智能化的卫生服务。相比传统的公厕&#xff0c;智慧公厕不仅拥有更加智能化的设备&#xff0c;还配备了远程监控与管理系统&#xff0c;以及节能环保技术&#xff0…

优化页面加载时间:改善用户体验的关键

✨✨ 祝屏幕前的您天天开心&#xff0c;每天都有好运相伴。我们一起加油&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一、为什么页面加载时间重要&#xff1f; 二、如何减少页面加载时间&#xff1f; …

SiLM824x系列SiLM8244 配置为高、低边驱动 支持死区可编程,隔离双通道门级驱动器

SiLM824x系列SiLM8244是一款具有不同配置的隔离双通道门极驱动器。SiLM8244配置为高、低边驱动&#xff0c;SiLM8244可提供4A的输出源电流和6A的灌电流能力&#xff0c;并且其驱动输出电压可以支持到33V。支持死区可编程&#xff0c;通过调整DT脚外部的电阻大小&#xff0c;调整…

基于单片机汽车超声波防盗系统设计

**单片机设计介绍&#xff0c;基于单片机汽车超声波防盗系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机汽车超声波防盗系统设计概要主要涉及利用超声波传感器和单片机技术来实现汽车的安全防盗功能。以下是对…

注册接口和前置SQL及数据生成及封装

注册接口 演示注册接口的三步操作&#xff1a;【注册流程逻辑】 第一步&#xff1a;发送注册短信验证码接口请求 请求方法&#xff1a; put 请求地址&#xff1a;http://shop.lemonban.com:8107/user/sendRegisterSms 请求参数&#xff1a;{“mobile”:“13422337766”} 请求头…

【面试专题】Mybatis高频面试题

一、介绍下MyBatis中的工作原理 1。介绍MyBatis的基本情况&#xff1a;ORM 2。原理&#xff1a; MyBatis框架的初始化操作处理SQL请求的流程 1.系统启动的时候会加载解析全局配置文件和对应映射文件。加载解析的相关信息存储在 Configuration 对象 Testpublic void test1(…

C++算法补充---STL

这里写目录标题 CSTL容器字符串函数(string容器函数)字符串转字符 算法交换函数拿到容器或者数组的第一个最大&#xff08;小&#xff09;值元素的下标或者值排序函数求字符数组的有效长度atoi函数&#xff08;将字符串类型的数字转为真正的int型数字&#xff09;string转字符 …

STM32八种I/O口模式

STM32八种I/O口模式 文章目录 STM32八种I/O口模式前言一、stm32八种I/O类型二、区别1.模拟输入2.浮空输入3.上拉输入4.下拉输入5.推挽输出6.开漏输出7.复用推挽输出8.复用推挽输出 总结 前言 作为两年嵌入式软件攻城狮&#xff0c;还没仔细去理解过STM32的GPIO的八种使用模式&…

企业招聘,应用MBTI来做人才测评招聘测评

每年的校招季都是企业争抢优秀应届毕业生人才的忙碌季。只有精准识人用人&#xff0c;才能不断为企业注入新鲜活力和青春智慧。但是随着毕业生数量越来越多&#xff0c;企业如何在招聘中精准发现自己最需要的人才&#xff0c;成为摆在人力资源部门的大难题。人才测评是各企业都…

springboot在线学习做题答题统计系统-可视化分析系统

系统阐述的是使用可视化的学习系统的设计与实现&#xff0c;对于java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了 springboot框架和MySql数据库技术搭建系统的整体架构。…

【分析教程】unity游戏修改so文件

基础知识 0x1.apk安装后在手机中的目录 apk安装后会在两个包下生成相关包&#xff1a;data/data/、data/app/。 这里拿网易云音乐的安装目录举例。Data/App目录下通常会有三个文件&#xff1a; lib文件夹&#xff08;包含so库文件&#xff09;、 ‚oat文件夹&#xff08;O…

算法系列--递归,回溯,剪枝的综合应用(2)

&#x1f495;"对相爱的人来说&#xff0c;对方的心意&#xff0c;才是最好的房子。"&#x1f495; 作者&#xff1a;Lvzi 文章主要内容&#xff1a;算法系列–递归,回溯,剪枝的综合应用(2) 大家好,今天为大家带来的是算法系列--递归,回溯,剪枝的综合应用(2) 一.括号…

揭秘阿里面试必问:Tomcat类加载机制解析

各位小米的小伙伴们,大家好呀!今天小米要和大家聊聊一个很有趣的话题——阿里巴巴面试题:Tomcat的类加载机制。作为一个技术爱好者,小米深知技术分享的重要性,希望通过这篇文章与大家一起深入了解Tomcat的类加载机制,加深对Java Web开发的理解,也希望能够帮助到正在准备…

五款常用在线JavaScript加密混淆工具详解:jscrambler、JShaman、jsfack、ipaguard和jjencode

摘要 本篇技术博客将介绍五款常用且好用的在线JavaScript加密混淆工具&#xff0c;包括 jscrambler、JShaman、jsfack、freejsobfuscator 和 jjencode。通过对这些工具的功能及使用方法进行详细解析&#xff0c;帮助开发人员更好地保护和加密其 JavaScript 代码&#xff0c;提…

希亦、洁盟、大宇超声波清洗机好用吗?比拼谁是性价比之王

在追求高效生活品质的今天&#xff0c;超声波清洗机以其独特的清洁技术和便捷的操作方式&#xff0c;成为了家用和商用清洁领域的新宠。尤其对于眼镜用户而言&#xff0c;一台高效的超声波清洗机不仅能够轻松去除镜片上的污渍和细菌&#xff0c;更能保护镜片不受损伤&#xff0…

一款完全免费无广告的浏览器插件

界面上的图标都支持拖拽移动位置 一、官网 官方网站 www.brtab.top 二、功能 精美的小组件 天气组件&#xff1a;可以查看不同城市的当前以及未来7天的天气变化&#xff0c;并了解当前的所有天气指数 日历组件&#xff1a;可以显示当前的日期&#xff0c;包含农历日期&…

不可不知的,数字孪生在智慧城市中的八大应用。

数字孪生是一种将物理世界和数字世界相结合的技术&#xff0c;其在新型智慧城市建设中有着广泛的应用&#xff0c;主要包括以下几个方面&#xff1a; 城市规划和设计&#xff1a; 数字孪生技术可以将城市的三维数据模型与实际场景相结合&#xff0c;帮助城市规划师和设计师更…

ROS2从入门到精通1-2:详解ROS2服务通信机制与自定义服务

目录 0 专栏介绍1 服务通信模型2 服务模型实现(C)3 服务模型实现(Python)4 自定义服务5 话题、服务通信的异同 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS2进行实际项目的开发和调试的工程能力。…

Linux(CentOS7)配置系统服务以及开机自启动

目录 前言 两种方式 /etc/systemd/system/ 进入 /etc/systemd/system/ 文件夹 创建 nginx.service 文件 重新加载 systemd 配置文件 ​编辑 配置开机自启 /etc/init.d/ 进入 /etc/init.d/ 文件夹 创建 mysql 文件 编写脚本内容 添加/删除系统服务 配置开机自启 …

【官方推荐】华清远见Hi3861鸿蒙开发板助力全国大学生嵌入式芯片与系统设计竞赛(海思赛道)

为提高全国高校学生在嵌入式芯片及系统设计领域和可编程逻辑器件应用领域的自主创新设计与工程实践能力&#xff0c;培养具有创新思维、具备解决复杂工程问题能力且拥有团队合作精神的优秀人才&#xff0c;全国大学生嵌入式芯片与系统设计竞赛组织委员会举办第七届&#xff08;…