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注解。 先将实体…

【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 // 这个配置…

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…

【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了。

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

目录 一.网络的发展史 二.网络通信基础 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;但是使用上面三个工具都是无法获取风扇…

Mybatis-Plus 批量插入数据时报错 java.lang.Object Not Found TableInfoCache

文章目录 前言问题回溯排查过程总结 前言 报错堆栈信息如下&#xff0c;基本是mybatis-plus源码中的一些东西&#xff1a; com.baomidou.mybatisplus.core.exceptions.MybatisPlusException: java.lang.Object Not Found TableInfoCache.at com.baomidou.mybatisplus.core.to…

REST风格【SpringBoot】

1.REST简介 行为动作 通常模块名使用复数&#xff0c;也就是加s 2.RESTful入门 Controller public class UserController {RequestMapping(value "/users", method RequestMethod.POST)public String save() {System.out.println("user save");return &…

ClickHouse进阶(十二):Clickhouse数据字典-2-字典类型

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术,IT贫道_大数据OLAP体系技术栈,Apache Doris,Kerberos安全认证-CSDN博客 &#x1f4cc;订阅…

英码深元“三位一体”AI场景化解决方案,助力多地化工园区快速实现智慧化转型!

我国是世界公认的化工大国&#xff0c;同时也是崛起中的化工强国。近年来多起重大爆炸事故暴露出我国化工园区安全问题突出&#xff0c;特别是在安全风险管控数字化转型、智能化升级方面存在明显短板和不足&#xff0c;尤其突出的痛点&#xff1a;化工园区的日常管理方式较为粗…

电子烟行业常用的英文表达

1. 电子烟的各种表达 a) 电子烟 i. Electronic-cigarette, ii. Electronic smoke, iii. electronic cigarettes iv. Electric cigarette, v. E-Cigarettes vi. e-cigarette, vii. e-Cig viii. E cigar,e-cigar 电子烟雪茄 2. 电子烟特指词汇及衍生 a) VAPE i. Vapo…

【Git】Git 分支

Git 分支 1.分支简介 为了真正理解 Git 处理分支的方式&#xff0c;我们需要回顾一下 Git 是如何保存数据的。 或许你还记得 起步 的内容&#xff0c; Git 保存的不是文件的变化或者差异&#xff0c;而是一系列不同时刻的 快照 。 在进行提交操作时&#xff0c;Git 会保存一…