Question

我仍在学习 React，但情况是这样 - 我有一个在页面加载时显示的弹出窗口。我想将弹出窗口延迟 5 秒。使用 useState 有效，但是当弹出窗口关闭时，它会在 5 秒后再次显示，这说明为什么会发生这种情况。根据我提供的信息，是否有另一种方法来管理 React 中弹出窗口的打开和关闭？

这是我目前使用的 useState

const PopupModal = ({url}) => {
    const [open, setOpen] = useState(false);
    const closeModal = () => setOpen(false);
    React.useEffect(() => {
        setTimeout(() => {
            setOpen(true)
        }, 5000)
    }, [open])
    if (!open) return null

    return (
        <Popup open={open} closeOnDocumentClick onClose={closeModal}>
            <h1>Hey Hey!</h1>
        </Popup>
    );
};

export default PopupModal;

Answer 1

你的依赖数组是错误的。您说的是“随时设置 open 更改的超时时间”。您应该让它“在 setOpen 函数更改时设置超时（仅在第一次渲染时）”

const PopupModal = ({url}) => {
    const [open, setOpen] = useState(false);
    const closeModal = () => setOpen(false);
    React.useEffect(() => {
        setTimeout(() => {
            setOpen(true)
        }, 5000)
    }, [setOpen]) 
    if (!open) return null // also this line is useless, since you're using the `open` prop of the Popup component

    return (
        <Popup open={open} closeOnDocumentClick onClose={closeModal}>
            <h1>Hey Hey!</h1>
        </Popup>
    );
};

export default PopupModal;

在 React 中延迟显示弹出窗口

1 个答案: