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.hqwc.cn/news/105957.html

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

相关文章

开赛啦!第六届“中国法研杯”司法人工智能挑战赛精彩启幕

9月9日&#xff0c;第六届“中国法研杯”司法人工智能挑战赛&#xff08;简写为“LAIC2023”&#xff09;在福建厦门正式拉开帷幕&#xff0c;主办方中国司法大数据研究院&#xff08;以下简称“中国法研”&#xff09;以及厦门市思明区政府、厦门海丝办有关领导共同参加了启动…

Linux文件属性操作函数

access函数 chmod函数 chown函数 修改文件的所在组或者所有者 truncate函数

QT生成ICO文件

生成ICO文件 #include <QApplication> #include <QImage> #include <QIcon> #include <QFile> #include <QDebug> #include <QPixmap>int main(int argc, char* argv[]) {QApplication app(argc, argv);// 读取图片文件QImage image(&quo…

使用 Nginx 实现企业微信域名配置中的校验文件跳转

背景 在企业微信中配置业务域名时&#xff0c;通常需要在该域名的根路径下放置一个校验文件&#xff0c;以验证域名的所有权。然而&#xff0c;如果该域名是第三方的&#xff0c;你可能无法直接在根路径下放置文件。在这种情况下&#xff0c;你可以使用 Nginx 来实现校验文件的…

【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解

本文介绍使用Jenkins一键将NodeJS&#xff08;Vue&#xff09;前端项目打包并上传到生产环境服务器&#xff0c;这里使用的是直接打包静态页面&#xff0c;发送到远程服务器Nginx配置目录的方式&#xff0c;首先确保服务器环境配置好&#xff0c;安装Nginx&#xff0c;运行目录…

SQL6 查找学校是北大的学生信息

描述 题目&#xff1a;现在运营想要筛选出所有北京大学的学生进行用户调研&#xff0c;请你从用户信息表中取出满足条件的数据&#xff0c;结果返回设备id和学校。 示例&#xff1a;user_profile iddevice_idgenderageuniversityprovince12138male21北京大学Beijing23214male…

探究SpringWeb对于请求的处理过程

探究目的 在路径归一化被提出后&#xff0c;越来越多的未授权漏洞被爆出&#xff0c;而这些未授权多半跟spring自身对路由分发的处理机制有关。今天就来探究一下到底spring处理了什么导致了才导致鉴权被绕过这样严重的问题。 DispatcherServlet介绍 首先在分析spring对请求处…

服务器分析和监控

在当今数字化时代&#xff0c;对于网络流量的分析和监控变得越来越重要。本文将详细介绍如何利用HTTPS代理服务器来实现高效、安全且可靠的流量分析与监控功能&#xff0c;并提供具体操作步骤以及相关技巧。无论是企业需要优化网络性能还是个人用户&#xff0c;在遵循法规合规前…

C语言深入理解指针(非常详细)(五)

目录 回调函数qsort使用举例qsort函数的模拟实现sizeof和strlen的对比sizeofstrlensizeof和strlen的对比一道关于sizeof的题 回调函数 回调函数就是一个通过函数指针调用的函数 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另一个函数&#xff0c;当这个指…

Python之线程(二)

一、线程同步和互斥锁 同一个资源,多人想用?排队啊! 现实生活中,我们会遇到“同一个资源,多个人都想使用”的问题。 比如:教室里,只有一台电脑,多个人都想使用。天然的解决办法就是,在电脑旁边,大家排队。前一人使用完后,后一人再使用。再比如,上厕所排队。 二、线…

保姆级-微信小程序开发教程

一&#xff0c;注册微信小程序 如果你还没有微信公众平台的账号&#xff0c;请先进入微信公众平台首页&#xff0c;点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信&#xff0c;我们选择 “小程序” 即可。 接着填写账号信息&#x…

打造高效的私密论坛网站:Cpolar内网穿透+HadSky轻量级搭建指南

文章目录 前言1. 网站搭建1.1 网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3 Cpolar稳定隧道&#xff08;本地设置&#xff09;2.4 公网访问测试 总结 前言 经过多年的基础…