不能使用 React 上下文？答案

【问题标题】：Can't use React context?不能使用 React 上下文？
【发布时间】：2021-04-17 09:59:59
【问题描述】：

我的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 类的定义如下：

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”。为什么我不能使用我的上下文？

【问题讨论】：

糟糕，这只是一个错字！应该是const firebase = useFirebase();

标签： javascript reactjs firebase use-context

【解决方案1】：

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

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

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

【讨论】：

是的，这有帮助！
谢谢，@EZbrute 如果您能支持我的回答，将不胜感激：)

【解决方案2】：

上下文提供者

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

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

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

【讨论】：