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
    )
}

上述的代码是有问题的,据说会发生我上述的问题,数据并不能更新。
首先看一下官方的解释:
react中使用Modal.confirm数据不更新的问题解决_第1张图片
我们只需要在生成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
    )
}

你可能感兴趣的:(#,antd,#,react,react.js,javascript,andt,modal,confirm)