React欢迎页超时未消失问题：仅首次访问显示功能异常排查

我想要实现欢迎页仅在首次访问网站时显示，为此用了useEffect Hook，结合LocalStorage记录访问状态，同时尝试用setTimeout让欢迎页一段时间后消失。

相关代码如下：

const [showStartPage, setShowStartPage] = useState(startPage.nothingShow);

useEffect(() => {
    const firstTimeLoaded = localStorage.getItem("firstTimeLoaded")
    if (!firstTimeLoaded) {
        setTimeout(() => {
            setShowStartPage(startPage.startPageShow);
            localStorage.setItem("firstTimeLoaded", "true");
        }, 2500);
    } else setShowStartPage(startPage.startPageNotShow)
}, []);

页面渲染部分：

<Fragment>
    <Stack>
       CONTENT ==>
    </Stack>
    {showStartPage === 2 && (<StartPage />)}
</Fragment>

我用一个包含三种状态的枚举来管理欢迎页状态：

• 欢迎页显示时：startPageShow = 2
• 欢迎页不显示时：startPageNotShow = 1
• 状态尚未定义时：nothingShow = 0

枚举代码：

export enum startPage {
    startPageShow = 2,
    startPageNotShow = 1,
    nothingShow = 0
}

当前问题：再次进入网站时欢迎页不加载（符合预期），首次访问时加载（符合预期），但欢迎页显示后不会自动消失（不符合预期）。我哪里出错了？

我曾尝试去掉枚举仅保留布尔值，但需要一个未定义状态来确保状态确定前不显示任何内容。

问题原因 #

你的代码只实现了「延迟2500ms后显示欢迎页」的逻辑，但完全没有添加「欢迎页显示一段时间后隐藏」的步骤。当前setTimeout里仅把状态设为startPageShow，之后没有任何修改状态的操作，所以欢迎页会一直显示。

修复方案 #

在首次访问的逻辑中，显示欢迎页后，再添加一个setTimeout，延迟指定时间后将状态改为startPageNotShow。同时注意清理定时器，避免内存泄漏：

const [showStartPage, setShowStartPage] = useState(startPage.nothingShow);

useEffect(() => {
    const firstTimeLoaded = localStorage.getItem("firstTimeLoaded")
    let showTimer, hideTimer;
    
    if (!firstTimeLoaded) {
        // 延迟2500ms显示欢迎页
        showTimer = setTimeout(() => {
            setShowStartPage(startPage.startPageShow);
            localStorage.setItem("firstTimeLoaded", "true");
            
            // 欢迎页显示一段时间后（比如3000ms）隐藏
            hideTimer = setTimeout(() => {
                setShowStartPage(startPage.startPageNotShow);
            }, 3000);
        }, 2500);
    } else {
        setShowStartPage(startPage.startPageNotShow);
    }

    // 组件卸载时清理定时器
    return () => {
        clearTimeout(showTimer);
        clearTimeout(hideTimer);
    };
}, []);

这样修改后，首次访问时会先等待2500ms显示欢迎页，再过3000ms自动隐藏，完全符合需求。另外添加了定时器清理逻辑，避免组件卸载后定时器仍执行导致的潜在问题。

内容的提问来源于stack exchange，提问作者Dmitr Zar