如何解决如何确定 React 上下文中的副作用是否已完成没有加载检查的附加属性?
我有一个 React 应用程序,将当前经过身份验证的用户保存在 React context 中,并使用带有 Effect hook 的异步函数调用加载它。因此,在整个应用程序中,我必须区分三种可能的状态:
-
useEffect
过程仍在进行中(即尚不清楚它是否是经过身份验证的用户)。 -
有一个经过身份验证的用户。
-
没有经过身份验证的用户(即来宾)。
目前,我只是在上下文状态中的附加 isLoaded
布尔属性的帮助下实现了三分法:
// AuthContext.jsx
import React,{ useEffect,useState } from 'react'
export const AuthUserContext = React.createContext()
export default ({ children }) => {
const [authUser,setAuthUser] = useState({
isLoaded: false,props: undefined
})
useEffect(() => {
;(async () => {
try {
// await for some async function call here
setAuthUser({
isLoaded: true,props: {
name: // ...,bio: // ...
// ...
}
})
} catch (err) {
setAuthUser({
isLoaded: true,props: undefined
})
}
})()
},[])
return (
<AuthUserContext.Provider value={{ authUser,setAuthUser }}>
{children}
</AuthUserContext.Provider>
)
}
它有效,但我想消除 isLoaded
控制并仅将状态用于真正的用户属性(即 name
、bio
、{{1 }} 等等。)。我该怎么做?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。