此自定義異步掛鈎未按預期工作

Question

我有這個自定義掛鈎來從 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。

有人可以指出我的錯誤嗎？

Answer 1

我認為這里的useState不合適，你沒有得到任何控制台警告嗎？ 鈎子只是一個js function 和其他任何東西一樣，它不是React組件！

嘗試使用局部變量代替...

編輯

useState是一個鈎子，因此您應該收到此警告：

掛機調用無效。 鈎子只能在 function 組件的內部調用。 這可能由於以下原因之一而發生： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能違反了 Hooks 規則 3. 你可能有多個 React 副本相同的應用程序請參閱有關如何調試和修復此問題的提示。

這正是這里的問題所在：您使用的鈎子不在反應功能組件的主體內，而是在普通的 js function 中使用它。