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

最新推荐文章于 2024-08-19 23:43:06 发布

六卿

最新推荐文章于 2024-08-19 23:43:06 发布

阅读量2.1k

点赞数 3

分类专栏： # antd # react 文章标签： react.js javascript andt modal confirm

本文链接：https://blog.csdn.net/qq_43291759/article/details/132692019

版权

react 同时被 2 个专栏收录

48 篇文章 3 订阅

订阅专栏

antd

3 篇文章 1 订阅

订阅专栏

在使用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
    )
}