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)
}

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

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

相关文章

OPENCV+QT环境配置

【qtopencv开发入门&#xff1a;4步搞定opencv环境配置2】https://www.bilibili.com/video/BV1f34y1v7t8?vd_source0aeb782d0b9c2e6b0e0cdea3e2121eba 第一步&#xff1a; 安装QT Qt 5.15 第二步&#xff1a; 安装OPENCV VS2022 Opencv4.5.5 C 配置_愿飞翔的鱼儿的博客…

SpringBoot底层注解

文章目录 前言一、Configuration二、Import导入组件三、Conditional条件装配四、ImportResource导入Spring配置文件五、ConfigurationProperties配置绑定总结 前言 本文主要讲诉Configuration、Import、Conditional、ImportResource、ConfigurationProperties注解。 先将实体…

[PHP] - 编译参数 --enable-sysvsem

这个函数支持默认不开启。使用配置--enable-sysvsem编译PHP来开启 [系统V信号量] 支持。 使用配置--enable-sysvshm编译PHP来开启 [系统V共享内存] 支持。 使用配置--enable-sysvmsg编译PHP来开启 [系统V消息] 支持。 由上面的说明可以得知 此配置用于进程控制&#xff0c;并且…

【DockerCE】Docker-CE 24.0.6正式版发布

官网下载地址&#xff08;For RHEL/CentOS 7.9&#xff09;&#xff1a; https://download.docker.com/linux/centos/7/x86_64/stable/Packages/ 相对于24.0.5版本&#xff0c;本次24.0.6版本更新的rpm包有 5 个&#xff0c;使用目录对比软件对比的结果如下&#xff1a; 在Lin…

使用融云 CallPlus SDK,一小时实现一款 1V1 视频应用

9 月 21 日&#xff0c;融云直播课 社交泛娱乐出海最短变现路径如何快速实现一款 1V1 视频应用&#xff1f; 欢迎点击小程序报名~ 1V1 音视频、远程服务类应用的实现利器——融云 CallPlus SDK 上线&#xff01; 关注【融云全球互联网通信云】了解更多 作为新一代音视频通话场…

RuoYi若依管理系统最新版 基于SpringBoot的权限管理系统

RuoYi是一个后台管理系统&#xff0c;基于经典技术组合&#xff08;Spring Boot、Apache Shiro、MyBatis、Thymeleaf&#xff09;主要目的让开发者注重专注业务&#xff0c;降低技术难度&#xff0c;从而节省人力成本&#xff0c;缩短项目周期&#xff0c;提高软件安全质量。 本…

前端代理报错Error occured while trying to proxy to: localhost:端口

webpack配置进行前端代理时&#xff0c; 报错信息如下&#xff1a;(DEPTH_ZERO_SELF_SIGNED_CERT) 需设置&#xff1a;secure为false即可解决此报错 // webpack配置前端代理config["/test"]{target: https://xxxx.com,changeOrigin: true,secure: false // 这个配置…

Playwright报错TypeError: Plain typing.NoReturn is not valid as type argument

我试了无数个方法去解决报错结果全都是徒劳&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 最终发现是python版本过低导致的&#xff0c;我的python版本是3.7.0&#xff0c;而需要3.7.0以上的版本&#xff0c;比如3.7.2、3.7.5或者3.8的版本都可以 真是服了啊&…

Python-函数进阶

函数的多返回值 按照返回值的顺序&#xff0c; 写对应顺序的多个变量接受即可&#xff0c; 变量之间用逗号隔开&#xff0c;支持不同类型的数据return def test_return():return 1, 2, 3x, y, z test_return()print(x) print(y) print(z)函数参数种类 使用方式上的不同&am…

CentOS 安装HTTP代理服务器 Tinyproxy

Tinyproxy是一个小型的基于GPL的HTTP/SSL代理程序&#xff0c;非常适合小型网络而且便于快速部署。这个代理程序最大的优点就是占用系统资源比较少。这里使用的系统为CentOS7.6&#xff0c;可以直接 yum 方式安装。 yum install tinyproxy -y 如果提示找不到安装包&#xff0…

列表和字典练习

定义四个学生信息 在Python环境下&#xff0c;用列表定义&#xff1a; >>> stu1[xiaoming,True,21,79.9] >>> stu1[lihong,False,22,69.9] >>> stu1[zhangqiang,True,20,89.9] >>> stu1[EMT,True,23,99.9]如图&#xff0c;定义了四个列表…

LeetCode 刷题记录——从零开始记录自己一些不会的

1. 最多可以摧毁的敌人城堡数目 题意 思路 两层循环&#xff0c;太low了 用一个变量记录前一个位置 代码 class Solution { public:int captureForts(vector<int>& forts) {int ans 0, pre -1;for (int i 0; i < forts.size(); i) {if (forts[i] 1 || forts…

c++ 学习之类型,常量以及变量的重点知识

const 和 volatile 组合考点 const int ( * ) 等价于 int const ( * ) const int x 1 ; 说明 x 是常量&#xff0c;无法修改 如何区分指针常量和常量指针 指针常量 为 先有指针后有常量 故为 形式如 &#xff1a; int * const p & x ; 且const 修饰的是 p &#xff0c…

2023最新版WiFi大师专业版小程序带流量主独立版【源码 + 搭建教程】

产品介绍 WiFi大师是一款专为商家店内用户设计的WiFi连接小程序。它的出现有效解决了商家在为客户提供WiFi服务的过程中遇到的各种问题,为消费者提供了更加高效快捷的上网方式。 除此之外,WiFi大师小程序还为商家提供了一些额外的功能,例如店铺优惠券发放和周边热门店铺展…

【MySQL】JDBC编程

MySQL-JDBC编程 文章目录 MySQL-JDBC编程Java的数据库编程JDBC工作原理JDBC的使用驱动包下载导入代码编写 Java的数据库编程 JDBC&#xff0c;即Java Database Connectivity&#xff0c;java数据库连接。是一种用于执行SQL语句的Java API&#xff0c;它是 Java中的数据库连接…

DELL 台式机的内置扬声器如何关闭

DELL 台式机的内置扬声器如何关闭&#xff1f; 点“开始”——控制面板——高清晰音频管理器——右上角“设备高级设置”——“播放设备”——点击“使前部和后部设备播放不同的音频流”前面的小方框——“确认”。ok了。

导航url链接中获取参数

1&#xff0c;如下举例&#xff0c;页面链接带两个参数 http://localhost:9555/index1.html?token4ffb21d4f4314d75a6bee347cd1f53d1&usernamewandu 2&#xff0c;在js 文档就绪函数中通过GetRequest方法获取对应的参数 var token,username; $(function () {token Get…

linux命令集合

cd:切换文件路径 pwd:显示当前所处的路径 mkdir&#xff1a;创建目录比如mkdir test touch:创建一个空文件touch test.txt in:用于指定文件夹在另一个位置建立同步的链接in -s /lib/test1 /user/lj 在user目录下建立指向/lib/test1 目录的lj文件 cat:cat file(查看文件内…

初识网络的发展史、通信基础和原理

目录 一.网络的发展史 二.网络通信基础 2.1IP地址 2.2端口号 2.3认识协议 2.3.1协议是什么&#xff1f; 2.3.2为什么需要协议&#xff1f; 2.3.3OSI模型和TCP/IP体系结构 三.网络通信的原理 总结 &#x1f381;个人主页&#xff1a;tq02的博客_CSDN博客-C语言,Java,J…

R730xd风扇调速

共使用了三个方法都是有效的&#xff0c;dell_fans_controller_v1.0.0和Dell_EMC_Fans_Controller_1.0.1以及ipmitool&#xff0c;前面两个是GUI界面后面一个是命令行工具 重点 我虽然能通过设置的ip地址能访问idrac管理界面&#xff0c;但是使用上面三个工具都是无法获取风扇…