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…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...

tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据
微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...