不能使用 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 似乎已正确初始化，因为我在控制台内获得了 output，但我不断收到错误：无法读取未定义的属性“loggedIn”。 为什么我不能使用我的上下文？

Answer 1

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

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

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

Answer 2

上下文提供者

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

每个 Context object 都带有一个 Provider React 组件，允许消费组件订阅上下文更改。

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