告诉渲染代码等待，直到收到对象

Question

我有以下代码，它从我的 firestore 数据库中抓取用户，然后根据某些用户逻辑返回一些组件，但由于对数据库的调用是异步的，因此逻辑将在抓取我的用户对象之前运行。有什么方法可以告诉 if 语句在用户被我的 useEffect(( 抓取后运行。

例如，console.log(user.isSeller)最初是未定义的，然后在收到数据后变为 true。

function StorefrontPage(props) {
const auth = useAuth();
const router = useRouter();
const [user, setUser] = useState({});
const uid = auth.user && auth.user.uid;
useEffect(() => {
uid && getUser(uid).then(currentUser => {
setUser(currentUser);
})
}, [auth])

console.log(user.isSeller);
//logic with user object
if (uid) {
if (user.isSeller) {
if (props.sellerId === uid) {
return (
<div>
<Storefront sellerId={props.sellerId}></Storefront>
<style jsx>{
"background-image:linear-gradient(to bottom, #ffffff, #D0D8FD);"
}</style>
</div>
);
}
else {
return (
<div>
<PublicStorefront sellerId={props.sellerId}></PublicStorefront>
<style jsx>{
"background-image:linear-gradient(to bottom, #ffffff, #D0D8FD);"
}</style>
</div>
)
}
}
else {
router.push(`/buyersportal/${auth.user.uid}`)
return (
<div>
<p>
Sending you to the buyer's Portal.
</p>
</div>
)
}
}
else {
return (
<div>
<PublicStorefront sellerId={props.sellerId}></PublicStorefront>
</div>
)
}  
}
export default StorefrontPage;

知道我是否可以使用一些函数来使其等到调用用户吗？

Answer 1

通常，解决此问题的模式是使用isLoading状态

const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
setIsLoading(true); // set loading to true again in case auth gets updated
uid && getUser(uid).then(currentUser => {
setUser(currentUser);
setIsLoading(false);
})
}, [auth])

然后你可以像这样做条件渲染：

if (isLoading) return <LoadingSpinner/>

但是，如果身份验证从未更新，您也可以将用户初始化为空：

const [user, setUser] = useState(null);

然后只需检查用户是否存在

if (user === null) return <LoadingSpinner/>

Answer 2

将用户设置为"未定义"或"null"，并在获取数据时返回一个加载器(或任何你想要的，只要它是jsx(：

if(!user){
return <Loader />
} 
// your logic if condition above isn't matched

当用户更新时，您的组件将被重新渲染