Question

为什么 ReactJs 中没有显示从 Firebase 用户获取的数据？

2022-08-17

237

javascript reactjs firebase firebase-authentication

我从 firebase 登录后获取用户数据。我也将其打印在控制台上，并显示数据在这里。但是当我尝试显示它时，它没有显示。也没有错误。我从浏览器开发人员工具中检查了元素，发现该字段为空。我想显示 displayName、email、emailVerified 。

这是显示我正在获取数据的控制台图像：

我的代码

import React from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const Home = () => {
  // get user information
  let displayName, email, emailVerified;

  const auth = getAuth();
  onAuthStateChanged(auth, user => {
    if (user) {
      // User is signed in, see docs for a list of available properties
      // https://firebase.google.com/docs/reference/js/firebase.User
      displayName = user.displayName;
      email = user.email;
      emailVerified = user.emailVerified;
      console.log(user);
    } else {
      // User is signed out
      // ...
    }
  });
  return (
    <div className="container">
      <div className="card w-75 mx-auto bg-warning mt-3">
        <div className="card-body">
          <h5 className="card-title">Name: {displayName}</h5>
          <h5 className="card-title">Email: {email}</h5>
          <h5 className="card-title">Verified: {emailVerified}</h5>
        </div>
      </div>
    </div>
  );
};

export default Home;

为什么数据没有显示？我怎样才能显示该数据？

Answer 1

这些变量不会以这种方式工作 - 您需要在组件中使用状态，请参阅：

详细说明 - 在函数式组件中，函数的上下文本质上是渲染。在范围顶部定义它们将与它们在 onAuthStateChanged 回调中设置的位置断开连接 - 在调用回调时，该组件将已经使用空值呈现并且不会重新渲染。

React 状态是用于处理这个问题的 - 并且当它们改变时会触发渲染。

这可以像这样完成：

const [user, setUser] = useState();

onAuthStateChanged(auth, user => {
  if (user) {
    setUser(user);
  } else {
    // User is signed out
    // ...
  }
});

return (
  <div className="container">
    <div className="card w-75 mx-auto bg-warning mt-3">
      <div className="card-body">
        <h5 className="card-title">Name: {user?.displayName}</h5>
        <h5 className="card-title">Email: {user?.email}</h5>
        <h5 className="card-title">Verified: {user?.emailVerified}</h5>
      </div>
    </div>
  </div>
);