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
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

上述的代码是有问题的，据说会发生我上述的问题，数据并不能更新。
首先看一下官方的解释：

我们只需要在生成Modal的时候接收返回的实例对象
然后调用update方法即可更新数据

    useEffect(() => {
        modal && modal.update({
            title: '请选择要查看的类型',
            content:returnModalFun() ,
        });
    }, [lookIPorAS])
1
2
3
4
5
6

全部代码：

```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
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53