useEffect 中未定义变量

Question

我试图currentUser在 Hook 内部的函数中使用 的值useEffect，但该值似乎不是用户的对象，而我在使用它时希望它是用户的对象。这是代码：

function Chat() {   

    const currentUser = useAuth()

    useEffect(() => {
        const fetchParticipants = async () => {
            console.log(currentUser.uid) // not defined
        }
        fetchParticipants()
    }, [])
}

这就是useAuth()正在调用的函数

export function useAuth() {
    const [ currentUser, setCurrentUser ] = useState();

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

    return currentUser;
}

Answer 1

的初始值currentUser将是，undefined因为这是您在挂钩中设置它时（不）传递给状态的值。

所以效果首先会undefined以 的值运行currentUser。

稍后，onAuthStateChanged将触发并更新状态。

这将触发重新渲染并且currentUser将是您想要的值。

但是，您的效果将不会重新运行，因为依赖项数组是[]. 您需要告诉它在值更新时重新运行该函数。

useEffect(() => {
    const fetchParticipants = async () => {
        console.log(currentUser.uid) // not defined
    }
    fetchParticipants()
}, [currentUser]) // <-------------------- Dependancy array