我正试图在Reaction项目中通过Firebase实现身份验证,但我在网上看到的所有教程都在useEffect中使用onAuthStateChanged方法,但我真的不明白这样做而不是在函数中正常运行它背后的原因.

useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => setCurrentUser(user)
    });
    return unsubscribe;
}, []);

按照这个逻辑,函数不会只运行一次,比如如果用户没有登录,函数会将CurrentUser设置为空,然后当用户try 登录时,它不会将CurrentUser设置为User,因为在这里,UsEffect在挂载时只运行一次.

也许我对react 钩子的概念理解不深,或者我在这里漏掉了什么.如果有人能给我一个深入的解释,并尽可能用最基本的术语解释,我将不胜感激.

谢谢.

推荐答案

按照这个逻辑,函数不会只运行一次

效果as a whole只会运行一次.当效果运行时,它会执行以下代码:

auth.onAuthStateChanged((user) => setCurrentUser(user));

这是对Firebase auth的订阅,告诉它每次auth状态改变时,您都希望调用函数(user) => setCurrentUser(user).内部函数将被调用at least一次,但如果用户登录或注销,则每次都将再次调用该函数.这将继续发生,直到调用unsubscribe函数.

由于您已经(正确地)从Effect返回了unsubscribe函数,因此组件将在组件卸载时停止侦听身份验证状态更改,而不是在组件卸载之前.如果组件永远不卸载,它将永远不会停止监听身份验证状态更改.

Reactjs相关问答推荐

InfiniteScroll持续获取数据,直到超过最大更新深度

Firebase删除UserWithEmail AndPassword仅创建匿名用户

使用Overpass API Endpoint计算 map 上的面积

如何在React中的textarea中显示字符数?

如何访问子集合中的文档?

在Map()完成React.js中的多个垃圾API请求后执行函数

可以使用mode.css/mode.scss引用常规的类名吗?

用于获取带有事件处理程序的API的动态路由

如何在 TimePicker 中更改时钟 colored颜色 和确定按钮字体 colored颜色 - MUI React

在 golang 服务器中刷新或直接 url 路径时响应 404

在遵循 react-navigation 的官方文档时收到警告消息

有没有办法在用户离开页面时防止输入模糊?

部署到github pages时请求路径错误

将 clerk 与 supabase 集成的最佳实践

为什么接受 useState 返回的函数的 setter 在使用 React 的单个调用中执行两次?

map 未显示在react 传单中

自动重新获取不起作用 - RTK 查询

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

在 Remix 中使用 chartjs 和 react-chartjs-2 会出现错误react-chartjs-2未在您的 node_modules 中找到

如何在自定义 JSX 元素上声明属性?