脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react Modal.confirm数据不更新

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

 更新时间：2023年09月07日 10:34:11   作者：六卿  
这篇文章主要介绍了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 } = 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
    )
}

到此这篇关于react中使用Modal.confirm数据不更新的问题解决的文章就介绍到这了,更多相关react 用Modal.confirm数据不更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React渲染机制及相关优化方案

    React渲染机制及相关优化方案

    这篇文章主要介绍了react中的渲染机制以及相关的优化方案，内容包括react渲染步骤、concurrent机制以及产生作用的机会，简单模拟实现 concurrent mode，基于作业调度优先级的思路进行项目优化的两个hooks，感兴趣的小伙伴跟着小编一起来看看吧
    2023-07-07
  • react.js 获取真实的DOM节点实例(必看)

    react.js 获取真实的DOM节点实例(必看)

    下面小编就为大家带来一篇react.js 获取真实的DOM节点实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • React实现卡片拖拽效果流程详解

    React实现卡片拖拽效果流程详解

    这篇文章主要介绍了React Web开发实战示例，实现卡片拖拽效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • React-Native中一些常用组件的用法详解(二)

    React-Native中一些常用组件的用法详解(二)

    这篇文章主要跟大家介绍了关于React-Native中一些常用组件的用法的相关资料，其中详细介绍了关于ScrollView组件、ListView组件、Navigator组件、TableBarIOS组件以及网络请求等相关内容，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-06-06
  • React-Hooks之useImperativeHandler使用介绍

    React-Hooks之useImperativeHandler使用介绍

    这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • 需要避免的五个react的ref错误用法

    需要避免的五个react的ref错误用法

    react是一个优秀的框架,提供了我们很多的便利,但是在使用的过程中,我们也会遇到很多的问题,其中一个就是ref的使用,以下是我列出的5个使用ref的错误用法,并提供了正确的用法,需要的朋友可以参考下
    2024-12-12
  • react开发中如何使用require.ensure加载es6风格的组件

    react开发中如何使用require.ensure加载es6风格的组件

    本篇文章主要介绍了react开发中如何使用require.ensure加载es6风格的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • React styled-components设置组件属性的方法

    React styled-components设置组件属性的方法

    这篇文章主要介绍了styled-components设置组件属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 前端面试题必会之前端react面试题

    前端面试题必会之前端react面试题

    在前端面试过程中经常会问到一些面试题，今天小编抽空给大家讲解前端面试题之必会react面试题,需要的朋友可以参考下
    2023-03-03
  • 基于React实现虚拟滚动的方案详解

    基于React实现虚拟滚动的方案详解

    这篇文章将以固定高度和非固定高度两种场景展开React中虚拟滚动的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03

最新评论