javascript - 用户值未使用 React.js 存储在 Firebase 身份验证中

Question

我是 Web 开发的新手，开始学习React.js。我正在制作 Instagram 克隆，但卡在了身份验证点上。
我想根据用户是否登录或未使用给定代码有条件地呈现一个按钮
{ user ? (<Button type="submit" onClick={auth.signOut()}>Log out</Button>) : (<Button type="submit" onClick={() => { setOpen(true) }}>Sign up</Button>) } （注册按钮打开一个带有注册表单的模式。）但是当我尝试这个时，它总是显示一个注册按钮。
初始和失败的方法
我尝试使用setUser()函数更新它，但不知何故它没有更新用户对象。我尝试在各个点将用户的值记录到控制台，但它始终设置为空。

这是我的主要 app.js 代码

import React from 'react';
import logo from './images/logo.png';
import Post from './post'
import {useState,useEffect} from 'react';
import {db ,auth}  from './firebase';
import { makeStyles} from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import Input from '@material-ui/core/Input';

function getModalStyle() {
  const top = 50 
  const left = 50

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const useStyles = makeStyles((theme) => ({
  paper: {
    
    position: 'absolute',
    width: 400,
    backgroundColor: theme.palette.background.paper,
    border: '1px solid lightgrey',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

function App() {
 
  const [posts,setPosts]=useState([
  ]);
  const [open,setOpen]=useState(false);
  const [username,setUsername]=useState('');
  const [password,setPassword]=useState('');
  const [email,setEmail]=useState('');
  const [user,setUser] = useState(null);
  const classes = useStyles();
  const [modalStyle] = useState(getModalStyle);
  const [openSignIn, setOpenSignIn] = useState(false);
   
  

   useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((authUser) => {
       console.log("unsubscirbe was called");
      if (authUser) {
        // if user has logged in...
        setUser(authUser);
        setEmail(authUser.email);
        console.log("user was set to" )
        

      } else {
        // if user has logged out... 
        setUser(null);
      }
      
    })

    return () => {
      // perform some cleanup actions
      unsubscribe();
    }
  }, [user,email, username]);

  useEffect(()=>{

    db.collection('posts').onSnapshot(snapshot => {
      setPosts(snapshot.docs.map(doc => ({
        id: doc.id,
        post: doc.data()

      })));
    })

  },[]);

 const signUp = (event) => {

    // This is to prevent the page from refreshing when we submit the form
    event.preventDefault();
    auth.createUserWithEmailAndPassword(email, password)
    .then((authUser) => {
      
      return authUser.user.updateProfile({
        displayName: username,
        
      })
    })
    .catch((error) => alert(error.message));
    setOpen(false);
  }
    return (
    <div className="App">
     <Modal
        open={open}
        onClose={() => setOpen(false)}>
       <div style={modalStyle} className={classes.paper} >
        <form className='modal'>
          <center>
         <img src={logo}
         class="app__header__logo"
         alt="logo">
         </img>
         </center>
         <Input placeholder="Username" value={username}  onChange={ (e) => setUsername(e.target.value)}/>
         <Input placeholder="Email" value={email}  onChange={ (e) => setEmail(e.target.value)} />
         <Input placeholder="Password" value={password} type="password" onChange={ (e) => setPassword(e.target.value)} />
         <Button type="submit" onClick={signUp}>Sign up</Button>
         
         </form>
        </div>
     </Modal>
    <div className='app__header'>
    <img src={logo}
    class="app__header__logo"
    alt="logo">
    </img>
    { user ? (<Button type="submit" onClick={auth.signOut()}>Log out</Button>) :
    (<Button type="submit" onClick={() => { setOpen(true)
    }}>Sign up</Button>)
    }
    </div>
      <h1>Hi! {username}</h1>
       {
         posts.map( ({id,post}) => (
           <Post key={id} username={post.username} img={post.img} caption={post.caption } />
         ))
       }
       
    </div>
  );
}
export default App;

标签： javascriptreactjsfirebase-authentication