Мой компонент не может прочитать свойство в первом рендере, но во втором рендере мое свойство уже будет иметь

Question

Это моя ошибка Ошибка типа: невозможно прочитать свойство 'email' со значением NULL

Это компонент моего провайдера

import React, { useState } from 'react'
import { whatchUserChanges } from '../services'

export const AuthContext = React.createContext()
export default function AuthContextProvider(props) {
    const [state, setState] = useState({
        isLoggedIn: false,
        user: null,
        authReady:false
    })

    useState(() => {
        whatchUserChanges((user) => {
            if (user) {
                setState({
                    isLoggedIn: true,
                    user: user,
                    authReady:true
                })
            } else {
                setState({
                    isLoggedIn: false,
                    user: null,
                    authReady:true
                })
            }
        })
    }, [])

    return (
        <AuthContext.Provider value={state}>
            {props.children}
        </AuthContext.Provider>
    )
}

Это мой компонент, который я хочу отображать по электронной почте для моего свойства

import React, { useContext } from "react"
import { AuthContext } from "../../context/auth"


export default function Dashboard() {
  const contextAuth = useContext(AuthContext)
  console.log(contextAuth.user.email)
    return (
      <div className="Dashboard">El email es {contextAuth.user.email}</div>
    )
}

, когда я удаляю эту часть

{contextAuth.user.email}

Я видел в первом рендере, работает и contextAuth.user .emai - ноль, но во втором рендере в консоли contextAuth.user.emai - не ноль.

Это мой репозиторий: https://github.com/RotomFormProgramador/learnfirebase

Как я решил эту проблему?

Answer 1

Обработать случай, когда user равен null

export default function Dashboard() {
  const contextAuth = useContext(AuthContext)
  const user = contextAuth.user || {};
    return (
      <div className="Dashboard">El email es {contextAuth.user.email}</div>
    )
}

---

или показать другое сообщение, если пользователь не вошел в систему

export default function Dashboard() {
  const {user, isLoggedIn} = useContext(AuthContext)

  if (isLoggedIn){
    return (
      <div className="Dashboard">El email es {user.email}</div>
     );
  } 

  return (<div>User is not logged in</div>);
}