面试题：React自定义Hooks中如何处理复杂的状态逻辑并结合条件渲染

Question

创建一个自定义Hooks `useUserState`，用于管理用户的登录状态、用户信息（如用户名、邮箱）等复杂状态。并且在组件中，根据用户的不同登录状态及用户信息的完整性进行条件渲染。例如，若用户登录且用户信息完整，显示详细个人资料；若登录但信息不完整，显示补充信息提示；若未登录，显示登录相关引导。写出`useUserState`的代码及使用该Hooks的组件代码。

Answer 1

import { useState, useEffect } from 'react';

// 自定义Hooks useUserState
const useUserState = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [userInfo, setUserInfo] = useState({
        username: '',
        email: ''
    });

    // 模拟从本地存储加载用户状态和信息
    useEffect(() => {
        const storedIsLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
        if (storedIsLoggedIn) {
            const storedUserInfo = JSON.parse(localStorage.getItem('userInfo'));
            setIsLoggedIn(storedIsLoggedIn);
            setUserInfo(storedUserInfo);
        }
    }, []);

    // 模拟登录操作
    const login = (userData) => {
        setIsLoggedIn(true);
        setUserInfo(userData);
        localStorage.setItem('isLoggedIn', 'true');
        localStorage.setItem('userInfo', JSON.stringify(userData));
    };

    // 模拟登出操作
    const logout = () => {
        setIsLoggedIn(false);
        setUserInfo({
            username: '',
            email: ''
        });
        localStorage.removeItem('isLoggedIn');
        localStorage.removeItem('userInfo');
    };

    return {
        isLoggedIn,
        userInfo,
        login,
        logout
    };
};

// 使用useUserState的组件
const UserComponent = () => {
    const { isLoggedIn, userInfo, login, logout } = useUserState();

    return (
        <div>
            {!isLoggedIn && (
                <div>
                    <p>未登录，请登录。</p>
                    <button onClick={() => login({ username: 'testUser', email: '[e-mail]' })}>模拟登录</button>
                </div>
            )}
            {isLoggedIn && (
                <div>
                    {Object.keys(userInfo).every(key => userInfo[key]) ? (
                        <div>
                            <p>用户名: {userInfo.username}</p>
                            <p>邮箱: {userInfo.email}</p>
                            <button onClick={logout}>登出</button>
                        </div>
                    ) : (
                        <div>
                            <p>用户信息不完整，请补充。</p>
                            <button onClick={logout}>登出</button>
                        </div>
                    )}
                </div>
            )}
        </div>
    );
};

export default UserComponent;