Reactjs 如何在函数调用中包装React状态变量？

我有一些状态是异步更新的，我希望将其包装在函数调用中（以模块化代码）

具体地说，我有一个

isLoggedIn

state变量，我想在React组件中通过函数调用来检索它。到目前为止，我已经：

firebase.js

函数userLoggedIn（）{
const[isLoggedIn，setIsLoggedIn]=useState（false）；
firebase.auth（）.onAuthStateChanged（（用户）=>{
if（user==null）{
log（“没有用户登录”）；
}否则{
log（`User${User.uid}已验证！`）；
setIsLoggedIn（真）；
}
});
返回伊斯洛格丁；
}
导出默认userLoggedIn；

我有一个单独的组件，我想从中获取这个

isLoggedIn

状态：

AuthenticatedRoute.js

const AuthenticatedRoute=（{component:component，…rest}）=>{
const isLoggedin=userLoggedIn（）；
返回(
伊斯洛格丁(
) : (
)
}
/>
);
};

它在页面加载时工作正常，但如果我注销（并且

user=null

），则

isLoggedIn

不会变为False

---

如果我将函数体内联到

AuthenticatedRoute

中，这一切都可以正常工作：一般来说，如何实现这一点？

您是否尝试过将

setIsLoggedIn（false）放入其中if（user==null）

块中的code>？是的。谢谢您应该注意，这可能只是意外地起作用，因为您的函数名以

use

开头，所以我认为linter将其视为一个自定义钩子，您从函数组件的主体调用了它。另外，在

onAuthStateChanged

回调处理程序中应用布尔zen，只需

setIsLoggedIn（！！user）

。