新来反应，为什么我收到错误：“无法读取 null 的属性（读取'电子邮件'）TypeError：无法读取 null 的属性（读取'电子邮件'）”

Question

我正在创建一个导航栏，它具有带有 Firebase 身份验证的登录和注册功能。单击登录后，它将创建一个带有用户电子邮件的第一个字母的按钮。单击此按钮后，您将注销并返回到登录和注册按钮。该功能工作正常，但我在首页收到上述错误。我的反应相对较新，所以不确定为什么我会收到所述错误。

这是我的代码：

import React from "react";
import "./App.css";
import { auth } from "./firebase/init";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";

function App() {
  const [loggedIn, setLoggedIn] = React.useState();
  const [user, setUser] = React.useState({});
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setLoading(false);
      console.log(user.email[0].toUpperCase());
      if (user) {
        setUser(user);
      }
    });
  }, []);

  function register() {
    console.log("register");
    createUserWithEmailAndPassword(auth, "[email protected]", "test123")
      .then((user) => {
        console.log(user);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  function login() {
    signInWithEmailAndPassword(auth, "[email protected]", "test123")
      .then(({ user }) => {
        console.log(user);
        setUser(user);
      })
      .catch((error) => {
        console.log(error.message);
      });
  }

  function logout() {
    signOut(auth);
    setUser({});
  }

  return (
    <div className="nav">
    <figure>
      <img
        src="https://frontendsimplified.com/_nuxt/img/Frontend%20Simplified%20Logo.853fbda.png"
        className="nav__img"
        alt="logo"
      />
    </figure>
    <div className="btns__wrapper">
      {user.email ? (
        <button className="nav__btn" onClick={logout}>{user.email[0].toUpperCase()}</button>
      ) : (
          <div className="nav__btns">
            <button className="nav__btn--log" onClick={login}>Login</button>
            <button className="nav__btn--reg" onClick={register}>Register</button>
          </div>
      )}
    </div>
      </div>
  );
}

export default App;

我相信错误出在退货部分的 user.email 上，但我的理解仍然有限，所以希望得到一些帮助。

Answer 1

由于 email 是一个数组，最好将属性命名为 -> emails。

无论如何，你根据 user.email 有条件地渲染，这可能是一个空数组。

因此，当您尝试使用 email[0] 获取数组的第一个条目并尝试对该“空值”执行 toUpperCase() 方法时，您将收到上述错误。

可能需要检查用户？.电子邮件？.长度> 0