Email 和在 React 應用程序中使用 firebase 的密碼注冊，用戶的顯示名稱在初始渲染中顯示為 null。 我怎樣才能解決這個問題？

Question

我有一個 App 組件，在該組件下我有另外三個組件 Login、Register、DashBoard，在 DashBoard 組件下我有 NavBar，它有子項作為 Content

這是 App.js

 const App = () => { return ( <div className="app"> <Router> <Switch> <Route exact path="/" element={<Login />} /> <Route exact path="/register" element={<Register />} /> <Route exact path="/dashboard" element={<Dashboard />} /> </Switch> </Router> </div> ); };

在 Login.js 組件中，當用戶登錄成功時，我將 email 和 displayName 存儲到瀏覽器 localStorage 中的用戶 object

這是 DashBoard.js

 const Dashboard = () => { const { displayName, email } = JSON.parse(localStorage.getItem("user")); return ( <NavBar displayName={displayName}> <Content></Content> </NavBar> ); };

注冊.js

 const Register = () => { const [register, setRegister] = useState({ name: "", phoneNumber: "", email: "", password: "", }); const navigate = useNavigate(); const { name, phoneNumber, email, password } = register; const [user] = useAuthState(auth); const handleChange = (name) => (e) => { e.preventDefault(); setRegister({...register, [name]: e.target.value }); }; useEffect(() => { if (loading) return; console.log(user); if (user) navigate("/dashboard", { replace: true }); }, [user]); return ( <div style={{ marginTop: "15rem" }}> <Container> <Row className="justify-content-lg-center"> <Col xs> <FloatingLabel controlId="floatingInput" label="Name" className="mb-3" > <Form.Control type="text" placeholder="Doe joe" value={name} onChange={handleChange("name")} /> </FloatingLabel> <FloatingLabel controlId="floatingPassword" label="Phone Number" className="mb-3" > <Form.Control type="number" placeholder="phoneNumber" value={phoneNumber} onChange={handleChange("phoneNumber")} name="email" /> </FloatingLabel> <FloatingLabel controlId="floatingInput" label="Email Address" className="mb-3" > <Form.Control type="email" placeholder="Enter your Email.." value={email} onChange={handleChange("email")} name="email" /> </FloatingLabel> <FloatingLabel controlId="floatingPassword" label="Password" className="mb-3" > <Form.Control type="password" placeholder="Password" value={password} onChange={handleChange("password")} name="phoneNumber" /> </FloatingLabel> <Button variant="primary" onClick={() => { registerWithEmailAndPassword( name, phoneNumber, email, password ); navigate("/"); }} > Register </Button> </Col> </Row> </Container> </div> ); };

這里 Firebase.js

 const firebaseConfig = { //firebase config }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); //signIn Using google const logInWithEmailAndPassword = async (email, password) => { try { const res = await signInWithEmailAndPassword(auth, email, password); const user = res.user; } catch (err) { console.log(err); return err; } }; const registerWithEmailAndPassword = async ( name, phoneNumber, email, password ) => { try { const res = await createUserWithEmailAndPassword( auth, email, password, name, phoneNumber ); const user = res.user; await updateProfile(auth.currentUser, { displayName: name, }); await addDoc(collection(db, "users"), { uid: user.uid, name: name, phoneNumber: phoneNumber, authProvider: "local", email, password, }); } catch (err) { console.error(err); } }; //logout //exporting

導航欄.js

 const NavBar = (props) => { const [user] = useAuthState(auth); //react-firebase-hook/auth const navigate = useNavigate(); const handleLogout = () => { logout(); }; useEffect(() => { if (;user) navigate("/"), }; [user]). return ( <> <Navbar bg="light" variant="light"> <Container> <Navbar.Brand href="/dashboard">React-Bootstrap</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="me-auto"></Nav> <Nav> <Button variant="danger" onClick={handleLogout}> Logout </Button> <Nav.Link href="#deets"></Nav.Link> {user && ( <Navbar:Text>Signed in as. {props.displayName}</Navbar.Text> )} </Nav> </Navbar.Collapse> </Container> </Navbar> {props;children} </> ); };

我在 Navbar 組件中顯示用戶的名稱，但在注冊后，當用戶導航到根路由時，該路由是登錄組件，如果用戶隨后導航到 Navbar 組件將顯示的儀表板，則它會附加一個效果displayName 但當我重新加載頁面時它顯示為 null 然后它顯示名稱。 當用戶被重定向到 DashBoard 時，如何在注冊后的初始渲染中顯示 displayName

Answer 1

您沒有包含遇到問題的 NavBar 組件。 這似乎是一種競爭條件，其中在設置/檢索值之前將道具傳遞給 NavBar。 也許在你的 NavBar 組件中嘗試這樣的事情：

import { useEffect, useState } from 'react'
const NavBar = () => {

  const [displayName, setDisplayName] = useState('')
  const [email, setEmail] = useState('')

  // get the values when the component is rendered 
  useEffect(() => {
    const { displayName, email } = JSON.parse(localStorage.getItem("user"));
    setDisplayName(displayName)
    setEmail(email)
  }, [])

  return (
    <NavBar>
      <span>Email: {email}</span>
      <span>Display Name: {displayName}</span>
    </NavBar>
  );
};

Answer 2

我從 App.js 的組件樹頂部找到了解決方案 添加了這些行

 const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [user] = useAuthState(auth); useEffect(() => { setTimeout(() => { if (user.== null) { setName(user;displayName). setEmail(user;email), } }; 1000), }; [user]);

然后繼續深入到所需組件的道具。 不是一個可靠的解決方案，但它現在對我有用