快捷導航

react中使用Modal.confirm數(shù)據(jù)不更新的問題完美解決方案

更新時間：2023年09月07日 10:34:11 作者：六卿

這篇文章主要介紹了react中使用Modal.confirm數(shù)據(jù)不更新的問題解決方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

在使用Modal.confirm的時候今天發(fā)現(xiàn)了個疑惑的問題，為什么我明明從新set了數(shù)據(jù)而頁面視圖沒有變化，查了一下官方文檔找到了答案，解決了這個問題，特意在這里留下痕跡。

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

上述的代碼是有問題的，據(jù)說會發(fā)生我上述的問題，數(shù)據(jù)并不能更新。首先看一下官方的解釋：

在這里插入圖片描述

我們只需要在生成Modal的時候接收返回的實例對象然后調(diào)用update方法即可更新數(shù)據(jù)

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

到此這篇關(guān)于react中使用Modal.confirm數(shù)據(jù)不更新的問題解決的文章就介紹到這了,更多相關(guān)react 用Modal.confirm數(shù)據(jù)不更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: