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