奇怪的 React 挂钩行为，无法从函数访问新状态

Question

我使用库 react-use-modal，并且我正在尝试在 handleClick 函数内部读取 confirmLoading 的更新值。

handleClick 确实读取了在执行 const [ confirmLoading, setConfirmLoading ] = useState(false) 时定义的 confirmLoading 的第一个值，但是当我在 handleOk.[=20 中 setConfirmLoading 时从不更新=]

我不明白我做错了什么

import { Button, Modal as ModalAntd } from 'antd'
import { useModal } from 'react-use-modal'

export interface ModalFormProps {
    form: React.ReactElement
}

export const ModalForm: React.FC = () => {
    const [ confirmLoading, setConfirmLoading ] = useState(false)
    const { showModal, closeModal } = useModal()

    const handleOk = () => {
        setConfirmLoading(true)
        setTimeout(() => {
            setConfirmLoading(false)
            closeModal()
        }, 1000)
    }

    const handleCancel = () => {
        closeModal()
    }

    const handleClick = () => {             
        showModal(({ show }) => (
            <ModalAntd                  
                onCancel={handleCancel}
                onOk={handleOk}
                title='Title'
                visible={show}
            >
                //  the value of confirmLoading is always the one defined 
                //  with useState at the beginning of the file.
                <p>{confirmLoading ? 'yes' : 'no'}</p>                  
            </ModalAntd>
        ))
    }

    return (
        <div>
            <Button onClick={handleClick}>
                Open Modal
            </Button>
        </div>
    )
}

Answer 1

发生这种情况是因为关闭。您传递给 showModal 的组件会记住 confirmLoading，当您调用函数 setConfirmLoading 时，您的组件会再次呈现并重新创建函数 handleClick。 'Old' handleClick 和 showModal 中的 'old' 组件对 confirmLoading 中的新值一无所知。

尝试这样做：

export const ModalForm: React.FC = () => {
    const { showModal, closeModal } = useModal();

    const handleClick = () => {

        showModal(({ show }) => {
            const [ confirmLoading, setConfirmLoading ] = useState(false);
            const handleOk = () => {
                setConfirmLoading(true)
                setTimeout(() => {
                    setConfirmLoading(false)
                    closeModal()
                }, 1000)
            };

            const handleCancel = () => {
                closeModal()
            };

            return (
                <ModalAntd
                    onCancel={handleCancel}
                    onOk={handleOk}
                    title='Title'
                    visible={show}
                >
                    // the value of confirmLoading is always the one defined
                    // with useState at the beginning of the file.
                    <p>{confirmLoading ? 'yes' : 'no'}</p>
                </ModalAntd>
            );
        })
    };

    return (
        <div>
            <Button onClick={handleClick}>
                Open Modal
            </Button>
        </div>
    )
}

奇怪的 React 挂钩行为，无法从函数访问新状态

Strange React hooks behavior, can't access new state from a function

modal-dialog

reactjs

antd

react-hooks