React Context API 在传递 null 时不起作用

Question

我正在为一个 React/Firebase 应用程序设置身份验证，我希望用户的登录 in/off 状态是全局的，因此我可以有条件地呈现某些元素（在任何组件中）基于那种状态。
我从firebase中拉取当前用户状态，设置为context，如下：

FirebaseContext.js

import { auth } from "./firebaseConfig";
import { createContext } from "react";

export const FirebaseContext = createContext()

const user = auth.currentUser 


const FirebaseContextProvider = (props) => {
        return(
            <FirebaseContext.Provider value = {user}>
                {props.children}
            </FirebaseContext.Provider>
        )
}

export default FirebaseContextProvider

问题是这样的 - 当用户的状态为注销时，传递下来的 user 值为 null。当我尝试在我使用上下文的任何组件中解构 user 属性时，这会使我的应用程序崩溃：

Uncaught TypeError: Cannot destructure property 'user' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is null.

...这是我使用上下文的 header 组件的第一部分：

import { useContext, useRef } from 'react'
import { FirebaseContext } from '../FirebaseContext';
import { Link } from 'react-router-dom'
import { getAuth, signOut } from "firebase/auth";

const Header = () => {

const { user } = useContext(FirebaseContext)

...以及我如何设置我的应用程序

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Landing from './pages/landing'
import Venue from './pages/venues'
import SignUp from './pages/sign-up';
import Login from './pages/login';
import FirebaseContextProvider  from './FirebaseContext'
import './styles.css';

function App() {
  return (
  <FirebaseContextProvider>
    <Router>
      <div>
        <Routes>
          <Route path = '/' exact element = {<Landing />} />
          <Route path = '/venue/:id' element = {<Venue/>}/>
          <Route path = '/signup' element = {<SignUp/>}/>
          <Route path = '/login' element = {<Login/>}/>
        </Routes>
      </div>
    </Router>
  </FirebaseContextProvider>
  );
}

export default App;

我尝试在 FirebaseContext.js 中设置一个条件来克服这个问题，return 一个我将用来有条件地渲染元素的字符串：
const activeUser = user ? user : 'no active user'，但这并没有帮助，因为它 returned undefined。有什么建议吗？

Answer 1

上下文提供者的值是一个对象。要在传入 null 时避免此问题，请尝试这样做：

const FirebaseContextProvider = (props) => {
        return(
            <FirebaseContext.Provider value = {{user}}>
                {props.children}
            </FirebaseContext.Provider>
        )
}

React Context API 在传递 null 时不起作用

React Context API doesn't work when passing null

firebase

reactjs

firebase-authentication