不能使用 React 上下文？

Question

我的 index.js 有：

ReactDOM.render(
    <FirebaseContext.Provider value={new Firebase()}>
        <Suspense fallback="loading">
            <App/>
        </Suspense>
    </FirebaseContext.Provider>,
    document.getElementById('root')
);

内部 app.js 我正在尝试访问上下文：

export default function App(props) {
    console.log("app trying to use firebase");
    const {firebase} = useFirebase();
    return <div>{firebase && firebase.loggedIn()}</div>
}

FirebaseContext 和 Firebase class 定义如下：

export const FirebaseContext = createContext({});
export const useFirebase = () => useContext(FirebaseContext);

export default class Firebase {
    constructor() {
        console.log("firebase intialized")
        app.initializeApp(firebaseConfig);
        this.auth = app.auth();
    }

    loggedIn = () => {
        return !!this.auth.currentUser;
    }
}

FirebaseContext 似乎已正确初始化，因为我在控制台中获得了输出，但我一直收到错误：无法读取未定义的属性 'loggedIn'。为什么我不能使用我的上下文？

Answer 1

Context.Provider

<MyContext.Provider value={/* some value */}>

每个 Context 对象都带有一个 Provider React 组件，该组件允许使用组件订阅上下文更改。

Provider 组件接受要传递给作为此 Provider 后代的消费组件的值 prop。一个提供者可以连接到多个消费者。可以嵌套提供程序以覆盖树中更深处的值。

Answer 2

像这样删除解构后，您是否尝试过您的代码

const {firebase} = useFirebase();=>>>const firebase = useFirebase();

如果问题仍然存在，则尝试绑定 firebase 变量，因为 loggedIn 在基于 class 的组件中导致未定义。

不能使用 React 上下文？

Can't use React context?

javascript

reactjs

firebase

use-context