此自定义异步钩子未按预期工作
2021-01-12
56
我有这个自定义钩子来从 firebase 获取当前用户:
import React, { Component, useEffect, useState } from 'react';
import { auth } from "../firebase/auth-service"
const useFirebaseAuthentication = (firebase) => {
const [authUser, setAuthUser] = useState(null);
try {
auth.onAuthStateChanged(async user => {
if (user) {
setAuthUser(user)
} else {
setAuthUser(null);
}
})
} catch (error) {
throw error
}
return authUser
}
export default useFirebaseAuthentication;
当我从这个自定义钩子在屏幕上打印当前用户时 - 我得到了预期的结果。 当我使用钩子并尝试获取用户时 - 我得到了 null。
有人可以指出我的错误吗?
1个回答
我认为这里的
useState
不合适,你没有收到任何控制台警告吗?钩子只是一个
js
函数,和其他函数一样,它不是
React
组件!
尝试改用局部变量……
编辑
useState
是一个钩子,因此你应该收到此警告:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.
这正是这里的问题所在:你使用的钩子不在 React 功能组件的主体内,而是在普通的 js 函数中使用它。
k-wasilewski
2021-01-12