当前位置：首页 > news >正文

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

news 2025/8/15 10:06:12

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