我目前正在尝试使用 Okta 的 React SDK 来使用 TypeScript 使用 React 构建应用程序，并且我选择使用功能组件而不是基于类的组件。

因此，我在根据用户的身份验证状态呈现我的应用程序菜单的一部分时遇到问题。该文档显示使用useEffect()获取用户的身份验证状态，然后使用useState()基于该状态存储用户信息。

这在实践中似乎很合乎逻辑，也是一个好主意，但是当我尝试使用以下组件时：

import React, { useState, useEffect } from 'react';
import { Dropdown } from 'semantic-ui-react';
import { useOktaAuth } from '@okta/okta-react';

export const HeaderUserMenu = () => {

    // Okta Hook, State
    const { authState, oktaAuth } = useOktaAuth();
    const [ userInfo, setUserInfo ] = useState(null);

    // Get info when our state/etc update with this.
    useEffect(() => {
        if (!authState.isAuthenticated) {
            setUserInfo(null);
        } else {
            oktaAuth.token.getUserInfo()
                .then((info: any) => setUserInfo(info))
        }
    }, [authState, oktaAuth])

    return (
        { userInfo && 
            <Dropdown.Menu item text={userInfo.username}>
                <Dropdown.Item>Log Info</Dropdown.Item>
            </Dropdown.Menu>
        }
    )    

}

我收到两个错误：

',' expected.- 这是指向使用&&操作符来检查userInfo（是否为空？）这个组件的条件渲染。

Object is possibly 'null'.- 这是指向userInfo.username在条件渲染的东西里面的使用。逻辑的重点是仅在 userInfo 不为 null 时进行渲染，所以此时userInfo不能为 null，对吗？

我不确定我在这里做错了什么。

我觉得它与. 有关系useEffect，但我想我可能是错的，我仍然有点习惯在 React 中使用钩子，即使我以前用过useState，我从来没有使用过效果，直到现在。

提前致谢！