react中使用Modal.confirm数据不更新的问题完美解决方案
作者：六卿
这篇文章主要介绍了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数据不更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！