react中使用Modal.confirm数据不更新的问题解决
在使用Modal.confirm的时候今天发现了个疑惑的问题,为什么我明明从新set了数据而页面视图没有变化,查了一下官方文档找到了答案,解决了这个问题,特意在这里留下痕迹。
import { Button, Col, Form, Input, Modal, Radio, Row, Select, Space, Spin } from 'antd'
let modal = null
export default function (props) {const [typeStr, settypeStr] = useState('')const [lookIPorAS, setlookIPorAS] = useState('ip')const returnModalFun = () => {return <Row className="m-b-10-px"><Col span={16} key={lookIPorAS}><Radio.Group onChange={onchangeFun} value={lookIPorAS}><Radio value="ip">IP</Radio><Radio value="as">AS</Radio></Radio.Group></Col></Row>}const onchangeFun = (e) => {setlookIPorAS(e.target.value)}const detailsFun = (item) => {setItemObj(item)const { type } = itemif (type === '滥用') {// settypeStr('abuseString')modal = Modal.confirm({title: '请选择要查看的类型',content: returnModalFun(),onOk: () => {},})} else if (type === 'aaa') {settypeStr('type1')setVisible(true)} else if (type === 'bbb') {settypeStr('type2')setVisible(true)}}return (null)
}
上述的代码是有问题的,据说会发生我上述的问题,数据并不能更新。
首先看一下官方的解释:

我们只需要在生成Modal的时候接收返回的实例对象
然后调用update方法即可更新数据
useEffect(() => {modal && modal.update({title: '请选择要查看的类型',content:returnModalFun() ,});}, [lookIPorAS])
全部代码:
```javascript
import { Button, Col, Form, Input, Modal, Radio, Row, Select, Space, Spin } from 'antd'
let modal = null
export default function (props) {const [typeStr, settypeStr] = useState('')const [lookIPorAS, setlookIPorAS] = useState('ip')useEffect(() => {modal && modal.update({title: '请选择要查看的类型',content:returnModalFun() ,});}, [lookIPorAS])const returnModalFun = () => {return <Row className="m-b-10-px"><Col span={16} key={lookIPorAS}><Radio.Group onChange={onchangeFun} value={lookIPorAS}><Radio value="ip">IP</Radio><Radio value="as">AS</Radio></Radio.Group></Col></Row>}const onchangeFun = (e) => {setlookIPorAS(e.target.value)}const detailsFun = (item) => {const { type } = itemif (type === '滥用') {// settypeStr('abuseString')modal = Modal.confirm({title: '请选择要查看的类型',content: returnModalFun(),onOk: () => {},})} else if (type === 'aaa') {settypeStr('type1')setVisible(true)} else if (type === 'bbb') {settypeStr('type2')setVisible(true)}}return (null)
}
相关文章:
react中使用Modal.confirm数据不更新的问题解决
在使用Modal.confirm的时候今天发现了个疑惑的问题,为什么我明明从新set了数据而页面视图没有变化,查了一下官方文档找到了答案,解决了这个问题,特意在这里留下痕迹。 import { Button, Col, Form, Input, Modal, Radio, Row, Se…...
【vue】下拉、上拉刷新
我这里就把主要的下拉刷新的写一下,上拉是一样的道理,就不写了 <div class"talk_top" ref"listWrapper" id"listWrapper"><div class"loadingpic" v-loading"loading"></div><d…...
el-tree组件的锚点链接
el-tree部分: <el-tree:default-expand-all"true":data"anchorList":props"defaultProps"node-click"handleNodeClick"/> 组件内部部分: <div class"header" :id"content obj.id&q…...
汽车电气架构
文章目录 现阶段的汽车电气架构高压混合动力系统电子架构集成化(E/E Architecture Integration)车载以太网技术软件定义汽车 现阶段的汽车电气架构 当前最先进的汽车电气架构主要有以下几种: 48伏微混合系统(48V Mild Hybrid Sys…...
Spring中添加打印请求头的拦截器
问题 因为最近这个项目没有调用链监控系统的支持,但是,本地PostMan调试的时候又需要请求头才能正常调试。 思路 喊ChatGPT实现一下能够打印所有请求头的拦截器,然后,集成到已有代码即可。 解决 RequestHeaderInterceptor.jav…...
LeetCode(力扣)216. 组合总和 IIIPython
LeetCode216. 组合总和 III 题目链接代码 题目链接 https://leetcode.cn/problems/combination-sum-iii/ 代码 class Solution:def combinationSum3(self, k: int, n: int) -> List[List[int]]:result[]self.backtracking(n, k, 0, 1, [], result)return resultdef back…...
无涯教程-JavaScript - IMLOG10函数
描述 IMLOG10函数以x yi或x yj文本格式返回复数的公共对数(以10为底)。可以从自然对数计算复数的公共对数,如下所示: $$\log_ {10}(x yi)(\log_ {10} e)\ln(x yi)$$ 语法 IMLOG10 (inumber)争论 Argument描述Required/OptionalInumberA complex number for which you …...
C++ 学习之深拷贝 和 浅拷贝
前言 在C中,浅拷贝和深拷贝是涉及对象复制的两种不同方式,它们之间的关键区别在于拷贝对象时是否复制对象所指向的数据。 正文 浅拷贝(Shallow Copy): 浅拷贝只复制对象本身,而不复制对象所指向的数据。…...
Qt QtWidgets相关问题汇总
问:在Qt QWidget中设置WindowFlags为Qt::Window导致该Widget消失了,为什么? 答:WindowFlags设置为Qt::Window,表示该widget变为window类型,需要调用QWidget::show()方法。 问:Qt中WindowFlags…...
【ubuntu22.04 文件管理器nautilus配置默认终端为alacritty】
前言 ubuntu默认的终端不能通过设置里的默认应用程序配置nautilus是ubuntu自带的文件管理器,包管理器里面只有nautilus-extension-gnome-terminal而没有提供大多终端update-alternatives工具可以修改系统的默认终端(ctrl-alt-t),但对nautilus文件管理器…...
信息化发展30
IT 治理的内涵 IT 治理作为组织上层管理的一个有机组成部分, 由组织治理层或高级管理层负责, 从组织全局的高度上对组织信息化与数字化转型做出制度安排, 体现了治理层和最高管理层对信息相关活动的关注;IT 治理强调数字目标与组…...
css溢出隐藏的五种方法
一、文本溢出 当容器中的文本内容超出容器的宽度或高度时,就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。 单行文本溢出省略: 单行文本溢出省略通常用于标题等文本显示,可以通过设置white-space和text-overflow属性实现。w…...
RK3568-UART通信
RK3568-UART通信 1. 功能特点 RK3568有10个UART控制器,对应设备树里的uart0-uart9。 Rockchip UART (Universal Asynchronous Receiver/Transmitter) 基于16550A串口标准,支持以下 功能: 包含2组64字节的 FIFO,用于接收和传输支…...
武警三维数字沙盘电子沙盘虚拟现实模拟推演大数据人工智能开发教程第15课
部队三维数字沙盘电子沙盘虚拟现实模拟推演大数据人工智能开发教程第15课 现在不管什么GIS平台首先要解决的就是数据来源问题,因为没有数据的GIS就是一个空壳,下面我就目前一些主流的数据获取 方式了解做如下之我见(主要针对互联网上的一些…...
【Linux从入门到精通】通信 | 共享内存(System V)
本篇文章接着上篇文章通信 | 管道通信(匿名管道 & 命名管道)进行讲解。本篇文章的中点内容是共享内存。 文章目录 一、初识与创建共享内存 1、1 什么是共享内存 1、2 共享内存函数 1、2、1 创建共享内存 shmget 1、2、2 ftok 生成 key 1、2、3 获取共…...
ubuntu 扩展内存挂载
一般新建虚拟机时,系统默认的空间是20G,但是当我们搭建一些环境之后,需要解压一些稍微大点的源码时内存可能不够用了,这时我们需要扩展内存。 一、硬盘扩展 首先,关闭虚拟机,在虚拟机设置中将硬盘容量扩展…...
聚观早报|小米14渲染图曝光;蚂蚁金融大模型正式发布
【聚观365】9月9日消息 小米14渲染图曝光 蚂蚁金融大模型正式发布 路特斯推出全电动轿车Emeya 上汽集团8月整车销量42.3万辆 ChatGPT网站流量连续三个月下滑 小米14渲染图曝光 高通旗下全新一代旗舰芯片骁龙8 Gen3将于10月24-26日举办的骁龙技术峰会上亮相,相…...
musl libc 动态加载:默认链接脚本
前言 当前动态链接与静态链接应用程序时,均手动指定了链接脚本 使用 musl ldso 动态加载,发现不指定 链接脚本,编译后的 动态链接与静态链的应用程序依旧可以工作 那么不指定链接脚本,应用程序就没有链接操作了?还是有个默认的链接脚本? 经过实际验证,原来 musl gcc 工具…...
快速排序(递归和非递归两种方法实现)
快速排序: 1.首先找一个基准点(一般选取最左边第一个) 2.先从后往前遍历,找到第一个小于基准值的元素; 3.再从前往后,找到第一个大于基准值的元素; 4.将这两个元素两两交换 5.当i与j相遇时…...
ApiPost7使用介绍 | HTTP Websocket
一、基本介绍 创建项目(团队下面可以创建多个项目节点,每个项目可以创建多个接口): 参数描述库(填写参数时自动填充描述): 新建环境(前置URL、环境变量很有用)&#x…...
UE5新手避坑:用C++实现关卡切换和字符串处理,别再复制粘贴了
UE5 C实战避坑指南:关卡切换与字符串处理的高效实践 刚接触UE5 C开发的程序员们,是否经常遇到关卡切换不生效、字符串比较结果诡异、GetAllActorsOfClass导致性能骤降等问题?本文将深入剖析这些典型陷阱,带你从底层机制理解正确做…...
Pixel Couplet Gen 社区贡献指南:在CSDN分享你的使用心得与创意
Pixel Couplet Gen 社区贡献指南:在CSDN分享你的使用心得与创意 1. 为什么要分享你的使用经验 当你成功部署并体验了Pixel Couplet Gen后,可能会发现一些独特的用法或优化技巧。把这些经验分享出来,不仅能帮助其他开发者少走弯路࿰…...
PasteMD体验报告:极简界面+强大功能,这才是生产力工具该有的样子
PasteMD体验报告:极简界面强大功能,这才是生产力工具该有的样子 1. 重新定义"文本整理":当AI成为你的第二大脑 每天,我们都在与各种杂乱文本搏斗:会议速记、技术日志、网页摘录、临时灵感...这些内容往往以…...
PyTorch 2.8镜像实际效果:torch.compile+FlashAttention-2双优化下的吞吐量提升对比
PyTorch 2.8镜像实际效果:torch.compileFlashAttention-2双优化下的吞吐量提升对比 1. 镜像环境与技术亮点 PyTorch 2.8深度学习镜像为开发者提供了一个开箱即用的高性能计算环境。基于RTX 4090D 24GB显卡和CUDA 12.4的深度优化组合,这个镜像特别适合需…...
从Android大神到AI先锋!10年程序员血泪转型路,AI工程师高薪秘诀全公开!
一眨眼,我已经工作 10 年了。 在 2022 年以前,我一直相信,在这个行业里,只要技术栈钻得深,比如精通三方框架、熟悉 Android Framework、搞定性能优化,就能端稳饭碗。 但从 2023 年开始,一切都变…...
从激光雷达到AI服务器:实战解析PCIe高速走线在车载与数据中心的不同设计策略
从激光雷达到AI服务器:实战解析PCIe高速走线在车载与数据中心的不同设计策略 在硬件设计领域,PCIe总线技术已经成为了高速数据传输的事实标准。从自动驾驶汽车的激光雷达到数据中心的AI加速卡,PCIe的身影无处不在。然而,看似相同的…...
影刀+即刻:碎片化信息自动归类的联动玩法
影刀与即刻联动实现信息自动归类影刀RPA作为自动化工具,与即刻APP的推送功能结合,可高效管理碎片化信息。以下为具体实现方法:创建即刻机器人 在即刻APP中创建自定义机器人,设置关键词触发规则。例如设置"#工作""#…...
GLM-OCR模型Node.js环境配置与API服务搭建全指南
GLM-OCR模型Node.js环境配置与API服务搭建全指南 你是不是也遇到过这样的场景?手头有一堆图片需要提取文字,比如扫描的文档、截图或者手机拍的照片。自己手动录入?效率太低。用现成的在线OCR工具?又担心数据安全和调用限制。特别…...
事件驱动视觉革命:EVS技术如何重塑机器感知的未来格局
1. EVS技术:重新定义机器视觉的游戏规则 想象一下你正坐在高速行驶的列车上,窗外风景飞速掠过。传统相机就像每隔几秒才按下一次快门的游客,拍到的全是模糊不清的照片;而EVS(事件驱动视觉传感器)则像专业摄…...
终极Windows驱动管家:DriverStore Explorer释放系统空间完全指南
终极Windows驱动管家:DriverStore Explorer释放系统空间完全指南 【免费下载链接】DriverStoreExplorer Driver Store Explorer [RAPR] 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 引言:被遗忘的驱动仓库 你是否曾疑惑为…...
