React使用setTimeout延迟5秒渲染Modal不生效问题求助

问题排查 #

你的代码存在以下几个核心问题：

• Modal组件使用了useState钩子但没有从react包中导入，会直接触发运行报错。
• 你定义的ShowModal类组件完全没有被使用，最终导出的是内部showModal默认值为false的Modal组件，没有任何逻辑会将showModal修改为true，所以弹窗永远不会弹出。
• 定时器setTimeout直接写在类组件的render方法中，每次组件触发重渲染都会生成新的定时器，不仅会造成逻辑混乱，还会引发内存泄漏问题。
• ShowModal组件的返回逻辑错误：判断timePassed为false时返回的是Modal组件本身而非组件实例<Modal />，且timePassed为true时没有任何返回值，会触发渲染异常。

修复方案 #

直接去掉冗余的类组件，把定时器逻辑整合到Modal函数组件中即可，修复后完整代码如下：

import { useState, useEffect } from 'react'
import styled from 'styled-components'
import Team from '../../images/Team.svg'

import { Button, Background, ModalWrapper, ModalImg, ModalContent, CloseModalButton } from './ModalElements'

const Modal = () => {
    const [showModal, setShowModal] = useState(false);

    useEffect(() => {
        // 组件挂载后启动定时器，5秒后显示弹窗
        const timer = setTimeout(() => {
            setShowModal(true)
        }, 5000)
        // 组件卸载时清除定时器，避免内存泄漏
        return () => clearTimeout(timer)
    }, []) // 空依赖保证仅首次挂载时执行一次

    return (
        <>
            {showModal ? (
                <Background>
                    <ModalWrapper showModal={showModal}>
                        <ModalImg src={Team} alt="team" />
                        <ModalContent>
                            <h1>Title</h1>
                            <p>Subtitle thing</p>
                            <button>Join Today</button>
                        </ModalContent>
                        <CloseModalButton aria-label='Close modal' onClick={() => setShowModal(false)} />
                    </ModalWrapper>
                </Background>
            ) : null}
        </>
    )
}

export default Modal

使用说明 #

直接在项目的根入口组件（通常是App.jsx）中引入Modal组件渲染即可，用户进入网站后满5秒就会自动弹出弹窗。

内容的提问来源于stack exchange，提问作者Marko Nikic