currentUser是AuthContext.js给出的东西，但当导出时显示未定义

Question

这是AuthContext.js

import React from 'react';
import { useEffect, useState } from 'react';
import { useContext } from 'react';
import { auth } from '../firebase';
const AuthContext = React.createContext();
export function useAuth() {
return useContext(AuthContext);
}
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState();
const [loading, setLoading] = useState(true);
function signup(email, password) {
return auth.createUserWithEmailAndPassword(email, password);
}
function login(email, password) {
return auth.signInWithEmailAndPassword(email, password);
}
function logout() {
return auth.signOut();
}
useEffect(() => {
const unsuscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user);
setLoading(false);
console.log(user, 'user'); // This gives an object
});
return unsuscribe;
}, []);
console.log(currentUser, 'cU1');
const value = {
currentUser,
signup,
login,
logout,
};
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
);};

这是Header.js

import React, { useState } from 'react';
import { Nav, Navbar, Alert } from 'react-bootstrap';
import { Link, useHistory } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
export const Header = () => {
const [error, setError] = useState('');
const { logout, currentUser } = useAuth();
const history = useHistory();
const myStyle = {
zIndex: 200,
};
//console.log(currentUser, 'cU');
async function handleLogout() {
setError('');
try {
await logout();
history.push('/login');
} catch {
setError('Failed to logout');
}
}
return (
<div className='Header'>
{error && <Alert variant='danger'>{error}</Alert>}
<Navbar bg='dark' variant='dark' expand='lg' style={myStyle}>
<Link to='/'>
<Navbar.Brand>Photo-Terrace</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='ml-auto mr-auto'>
<Link to='/'>
<Nav.Link href='#home'>Go to Your Photos</Nav.Link>
</Link>
</Nav>
<Nav className=' mr-100'>
<Link to='/signup'>
<Nav.Link href='#home'> Sign Up</Nav.Link>
</Link>
<Link to='/login'>
<Nav.Link href='#home'>Log In</Nav.Link>
</Link>
<Link to='/update-profile'>
<Nav.Link href='#home'>Update Profile</Nav.Link>
</Link>
<Link to='/'>
<Nav.Link href='#home' onClick={handleLogout}>
Log Out
</Nav.Link>
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);};

当我尝试在AuthContext.js中的useEffect中给setCurrentUser(user.email)时，它会在控制台登录时给出电子邮件。但当它只是setCurrentUser(user)时，它显示未定义。此外，当它被导出，注册，登录给一些值，但currentUser显示未定义时，控制台登录到Header.js。问题是，我该如何在Header.js中获得currentUser的值它还显示了

的错误

TypeError: Cannot destructure property 'logout' of 'Object(...)(...)' as it is 
undefined.

because of this

const { logout, currentUser } = useAuth();

Answer 1

如文档所示，您应该在onAuthStateChanged()观察者中检查user对象是否不是null。

事实上，根据登录/登录流程，可能会发生onAuthStateChanged()观察者第一次被触发时，用户是null，因为他/她没有登录。

const unsuscribe = auth.onAuthStateChanged(user => {
if (user) {
setCurrentUser(user);
setLoading(false);
console.log(user, 'user'); // This gives an object
}
});