React中如何用useEffect延迟5秒调用renderCookie显示Cookie通知？

问题原因 #

• 组件挂载时，return renderCookie()会立即执行renderCookie函数并渲染内容，完全不受useEffect里的延迟逻辑影响。
• useEffect中调用的renderCookie()只是孤立执行了一次函数，返回的JSX没有被纳入组件的渲染流程，对页面输出无任何作用。

解决方法 #

新增一个状态变量控制通知的显示时机，通过延迟修改状态来触发组件渲染Cookie通知：

1. 添加showCookieNotice状态，初始值设为false，表示一开始不显示通知。
2. 在useEffect的定时器回调中，将showCookieNotice设为true，实现5秒后触发渲染。
3. 修改renderCookie函数，同时判断showCookieNotice状态和Cookie是否存在的条件，只有当状态为true且无Cookie时才渲染通知。

修改后的完整代码 #

import React, { useState, useEffect } from "react";
import { MdDone } from "react-icons/md";
import { getCookie, setCookie } from 'tiny-cookie';

const CookieNotice = () => {
    const [items, setItems] = useState({
        name: "zureaCookie",
        value: ""
    });
    // 新增状态控制通知显示时机
    const [showCookieNotice, setShowCookieNotice] = useState(false);

    useEffect(() => {
        const delay = 5000; 
        const timeoutId = setTimeout(() => {
            // 延迟后修改状态，触发组件渲染通知
            setShowCookieNotice(true);
        }, delay);
        return () => {
            clearTimeout(timeoutId);
        };
    }, []);

    const acceptCookie = (e) => {
        e.preventDefault();
        let newItemsObj = {...items};
        newItemsObj.value = "Accepted";
        setItems(newItemsObj);
        setCookie(items.name, newItemsObj.value, { expires: '1Y' });
    }

    const declineCookie = (e) => {
        e.preventDefault();
        let newItemsObj = {...items};
        newItemsObj.value = "Declined";
        setItems(newItemsObj);
        setCookie(items.name, newItemsObj.value, { expires: '1Y' });
    }

    const renderCookie = () => {
        const zureaCookie = getCookie(items.name);
        // 同时判断显示状态和Cookie存在情况
        return (
            <>
                {showCookieNotice && !zureaCookie ? (
                    <div className="cookie-notice-container">
                        <div className="cookie-notice-wrapper">
                            <div className="cookie-notice-content">
                                <p>We use cookies to improve your experience on our website. By browsing this website,
                                    you agree to our use of cookies.</p>
                            </div>
                            <div className="cookie-notice-btn-wrapper">
                                <a href="" className="btn-terms">Terms & Conditions</a>
                                <a href="" className="btn-decline" onClick={declineCookie}>Decline</a>
                                <a href="" className="btn-accept" onClick={acceptCookie}>Accept<MdDone className="md-done" /></a>
                            </div>
                        </div>
                    </div>
                ) : null}
            </>
        );
    }

    return renderCookie();
}

export default CookieNotice;

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