我试图让我的导航栏更新显示用户登录信息后，他们尝试登录，它是成功的。以下是相关的代码文件:
App.js
class App extends Component {
render(){
return (
<div>
<div className="App">
<header className="App-header">
<NavBar />
<Main />
</header>
</div>
</div>
);
}
}
export default App;
NavBar.js
const NavBar = () => {
const [userInfo, SetUserInfo] = useState();
useEffect(() => {
SetNavBar(null);
}, [])
function SetNavBar(element){
var user = auth.currentUser;
console.log(auth.currentUser);
if (user){
var userInfo =
React.createElement('div', {id : 'userDiv'},
React.createElement('span', {id : 'userDisplayName'}, user.email),
React.createElement('span', {id : 'signoutSpan'},
'(',
React.createElement('button', {id : 'signoutButton', onClick : (e) => SignOutUser(e.target)}, 'Signout'),
')'
)
);
SetUserInfo(userInfo);
}
else if(element != null && element.nodeName === 'A'){
var urlTO = element.href;
if(!urlTO.includes("login") && !urlTO.includes("signup")){
var userLoginSignupElement =
React.createElement('span', {id : 'loginSignupOptions'},
React.createElement(Link, {to : '/login', onClick : (e) => SetNavBar(e.target)}, 'Login'),
'/',
React.createElement(Link, {to : '/signup', onClick : (e) => SetNavBar(e.target)}, 'Signup')
);
}
else{
var userLoginSignupElement = null;
}
SetUserInfo(userLoginSignupElement);
}
else{
var userLoginSignupElement =
React.createElement('span', {id : 'loginSignupOptions'},
React.createElement(Link, {to : '/login', onClick : (e) => SetNavBar(e.target)}, 'Login'),
'/',
React.createElement(Link, {to : '/signup', onClick : (e) => SetNavBar(e.target)}, 'Signup')
);
SetUserInfo(userLoginSignupElement);
}
}
async function SignOutUser(element){
try{
await signOut(auth);
SetNavBar(null)
}
catch(err){
console.log(err);
}
}
return (
<div>
<nav id='navBar'>
<div id='logoTitleDiv'>
<img id='navBarLogo' src={logo} alt='Skeeters logo.'></img>
<Link to='/' onClick={e => SetNavBar(e.target)}>
<h2 id='pageHeader'>DJSkeeterB</h2>
</Link>
</div>
{userInfo}
</nav>
</div>
);
}
export default NavBar;
Main.js
const Main = () => {
return (
<div id='main'>
<Routes>
<Route exact path='/' element={<SongRequests/>}/>
<Route exact path='/upcoming' element={<Upcoming/>}/>
<Route exact path='/signup' element={<Signup/>}/>
<Route exact path='/login' element={<Login/>}/>
</Routes>
</div>
);
}
export default Main;
Login.js
const Login = () => {
const [navigateToHome, SetNavigateToHome] = useState(false);
const [userEmail, SetUserEmail] = useState('');
const [userPassword, SetUserPassword] = useState('');
const userEmailRef = useRef('');
userEmailRef.current = userEmail;
const userPasswordRef = useRef('');
userPasswordRef.current = userPassword;
const LoginToFirebase = async () => {
try {
await signInWithEmailAndPassword(auth, userEmailRef.current, userPasswordRef.current);
console.log(auth.currentUser);
document.getElementById('emailInput').innerHTML = '';
document.getElementById('passwordInput').innerHTML = '';
SetUserEmail('');
SetUserPassword('');
SetNavigateToHome(true);
} catch (err) {
console.error(err);
}
};
if(navigateToHome === true){
return <Navigate to='/'/>;
}
return (
<div id='loginDiv'>
<div>
<h2>Login</h2>
</div>
<div>
<label>Email: </label>
<input id='emailInput' type='email' placeholder='example@gmail.com' onChange={e => SetUserEmail(e.target.value)}/>
</div>
<div>
<label>Password: </label>
<input id='passwordInput' type='password' placeholder='Password' onChange={e => SetUserPassword(e.target.value)}/>
</div>
<button onClick={e => LoginToFirebase()}>Submit</button>
<div>
<span id='alreadySignedUpSpan'>
<Link to='/signup'>Not registered? Signup here</Link>
</span>
</div>
</div>
);
}
export default Login;
本质上我有我的应用程序显示导航栏在任何时候，并根据页面或用户认证它更新是不同的。组件Main目前正在使用react-router-dom来链接几个页面。在用户登录或注册Login.js或Signup.js后，他们被重定向到主页面。使用firebase身份验证登录成功。重定向后，他们降落在主页上，但导航栏没有更新，因为我不知道如何从Login.js中发生的事情调用状态更改来影响NavBar.js。
auth和auth.currentUser作为状态来处理，看看当它们更新时，它们是否可以用useEffect(() => {}, [auth])的方式来调用NavBar.js中的SetNavBar函数。
我如何更新我的组件NavBar，在我的功能LoginToFirebase()功能结束?
通过将userEmail状态提升到您的App组件(可能还有所有登录功能)，并使您的Login组件接受onClickLogin的prop