React.js：数据加载完成且用户授权后渲染页面的实现求助

你的代码核心问题是没有在组件的return中调用renderPage函数，所以不管状态如何变化，页面始终是空的。除此之外还有几个逻辑细节需要调整，以下是修复后的完整代码和关键说明：

修复后的代码 #

import React, { useEffect, useState } from "react";
import "../style/user.css";
import Loading from "../components/loading";
import LinkItem from "../components/linkItem";

function Admin() { 
    const [user, setUser] = useState(null);
    const [isAuth, setIsAuth] = useState(false);
    const [ready, setReady] = useState(false);

    // 检查用户授权状态
    useEffect(() => {
        const storedUser = JSON.parse(localStorage.getItem("rocket-link-user"));
        if (!storedUser) {
            window.location.href = "/login";
        } else {
            setUser(storedUser);
            setIsAuth(true);
        }
    }, []);

    // 模拟数据加载（实际项目中替换为真实数据请求）
    useEffect(() => {
        if (isAuth) {
            const timer = setTimeout(() => {
                setReady(true);
            }, 2000);
            // 清理定时器，避免内存泄漏
            return () => clearTimeout(timer);
        }
    }, [isAuth]);

    const renderPage = () => {           
        if (!isAuth) {
            // 未授权时啥也不显示，跳转逻辑已在useEffect中处理
            return null;
        }
        if (!ready) {
            console.log("loading");
            return <Loading/>
        }
        console.log("loaded");  
        return(
            <div className="user-body">
                <div className="user-container">
                    <div className="user-header">
                        <div className="user-avatar">
                            <img src="https://picsum.photos/200" alt="user avatar" />
                            <div className="user-name"><pre>@JohnDoe</pre></div><hr></hr>
                            <div className="user-bio"><pre><a>This is Bio title.For the user</a></pre></div>
                        </div>
                    </div>
                    <div className="user-content">
                        <button type="button" onClick={(e)=>{e.preventDefault()}}></button>
                        <div className="user-info">
                            User Info Cards here
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    return(
        <div className="admin-body">
            {renderPage()} {/* 关键：在这里调用renderPage渲染内容 */}
        </div>
    )
}

export default Admin;

关键修改点 #

• 核心修复：在return的admin-body容器中添加{renderPage()}，让组件根据状态渲染对应内容。
• 优化授权检查：把localStorage的读取放到useEffect里，避免组件初始化时的异步问题，同时同步更新user状态。
• 修正定时器逻辑：将setTimeout移入useEffect并添加清理函数，防止组件卸载时定时器残留导致内存泄漏，且仅在授权通过后启动加载流程。
• 简化渲染逻辑：直接根据isAuth和ready的状态判断返回内容，去掉冗余的参数传递，逻辑更直观。

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