我的组件在第一次渲染中无法读取属性，但在第二次渲染中我的属性已经有了答案

【问题标题】：My component can't read property in first render but in the second render my property , it will already have我的组件在第一次渲染中无法读取属性，但在第二次渲染中我的属性已经有了
【发布时间】：2020-03-13 20:44:53
【问题描述】：

这是我的错误 TypeError：无法读取 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

我是如何解决这个问题的？

【问题讨论】：

标签： javascript reactjs firebase react-hooks use-context

【解决方案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>);
}

【讨论】：