最近我发布了一个问题，其中我在使用 TypeScript（用于上下文）的 React/Okta 项目中遇到了一些条件渲染问题：
Am I unable to use inline "if" with useEffect in a functional React component?
我已经解决了这个问题，但现在我在以下组件中遇到了另一个问题：
import pkg from './pkg.cjs';
console.info(`Starting ${pkg.name} v${pkg.version}`);
当我成功登录 Okta 时，import React, { useState, useEffect } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import { Dropdown } from 'semantic-ui-react';
import { UserInfo } from '../../interfaces/UserInfo';
export const HeaderUserMenu = () => {
// Okta and State hooks
const { authState, oktaAuth } = useOktaAuth();
const [ userInfo, setUserInfo ] = useState<UserInfo>({});
// Log current user data
const logUser = () => {
console.log(userInfo);
}
// Watch the auth state and user info for changes, update state.
useEffect(() => {
if (!authState || !authState.isAuthenticated) {
setUserInfo({});
} else {
oktaAuth.getUser((info: UserInfo) => {
setUserInfo(info);
})
}
}, [authState, oktaAuth]);
// If we have an empty user object, return nothing, otherwise...
if (Object.keys(userInfo).length === 0) {
return null;
} else {
return (
<Dropdown item text={userInfo.name}>
<Dropdown.Item onClick={logUser}>Log User</Dropdown.Item>
</Dropdown>
)
}
}
钩子中的 authState 和 oktaAuth 中应该有东西，并且通过 useOktaAuth() 和 useState 钩子，我应该能够获取当前用户的信息。
然而，似乎钩子中的 useEffect 和 authState 并没有让它进入正在运行的效果，所以即使我当前登录了应用程序，这个组件也不是完全被渲染。
难道不能在效果中使用这样的钩子吗？文档使用了这个确切的模式，所以我会假设这将是 oktaAuth 和 Effect 钩子的正确用法，但我无法让它工作。
此外，为了解决我之前的问题，我必须做的一件事是在效果开始时添加检查 useOktaAuth()，否则它 - 总是 - 返回错误：
!authState
所以我不确定这是否与它有关？ authState 或 oktaAuth 没有理由应该为空，除非钩子不起作用？或者将该钩子与 useEffect 结合使用时存在一些问题。
有什么想法吗？