为什么我的 Firebase 数据库的某些属性未定义？

Question

当我的角色卡组件加载时，我收到以下错误。

类型错误：无法读取未定义的属性（读取“攻击”）

让我感到困惑的主要是角色名称（userData.name）和个人资料图像（userData.icon）不是未定义的。 所有属性都存储在同一个 Firebase 数据库中。 我不明白为什么我尝试访问的 4 个属性中有 2 个未定义。 如果尝试访问防御级别，我会遇到同样的错误。

我正在按照 Firebase 文档访问读取数据部分下的数据库： https://firebase.google.com/docs/database/web/read-and-write

这是我的组件代码：

import { Card, Container, Row, Col } from "react-bootstrap";
import { auth } from "../../components/Utils/firebase";
import { getDatabase, onValue, ref } from "firebase/database";
import { useState, useEffect } from "react";

import classes from "./charCard.module.css";

const CharCard = () => {
  const userId = auth.currentUser.uid;
  const db = getDatabase();
  const [userData, setUserData] = useState([]);

  //acceses Firebase
  useEffect(() => {
    const userRef = ref(db, "/Users/" + userId);
    onValue(userRef, (snapshot) => {
      const data = snapshot.val();
      setUserData(data);
      console.log(data);
    });
  }, []);

  return (
    <Card className={classes.charCard}>
      <h2 className={classes.charName}>{userData.name}</h2>
      <Container>
        <Row>
          <Col>
            <img className={classes.charIcon} src={userData.icon} />
          </Col>
          <Col>
            <Col className={classes.stats}>
              Attack: {userData.skills.attack.level}
            </Col>
            <Col className={classes.stats}>
              Defense: {userData.skills.defense.level}
            </Col>
          </Col>
        </Row>
      </Container>
    </Card>
  );
};

export default CharCard;

这是 Firebase 数据库的布局

"Users": {
    "fAzbjOaHflTTos45CDRu1ITrZs23": {
      "icon": "crossedswords.png",
      "name": "Waffle",
      "skills": {
        "attack": {
          "level": 1,
          "name": "Attack"
        },

如果我注释掉下面的内容并让页面先加载，然后取消注释，它会提取正确的值“1”。

<Col className={classes.stats}>
      Attack: {userData.skills.attack.level}
</Col>

我还尝试重写我访问 Firebase 数据库的方式以不使用 useEffect，但这并没有改变任何东西。

我有一种感觉，我缺少一些非常基本的东西。

如果需要更多上下文，回购公开在https://github.com/nschroder26/idleWeb 。

Answer 1

我读了你的代码。

您的代码有 3 个问题。

1. userData的初始值应该是空的 object 而不是数组。

2. 您应该检查是否设置了userData ，然后呈现您的 UI。

3. 您在没有任何依赖的情况下在 useEffect 中编写了onValue function 。 这意味着它只运行一次。 那时， auth.currentUser是未定义的，所以userId也是未定义的。 所以你得到 null 作为用户数据。

为了解决这个问题，您应该在onAuthStateChanged中编写您的逻辑。

这将解决您的问题：

import { Fragment, useState, useEffect } from "react";
import { auth } from "../../components/Utils/firebase";
import { getDatabase, onValue, ref } from "firebase/database";
import CharCard from "../../components/CharCard/charCard";
import { onAuthStateChanged } from "firebase/auth";

const Character = () => {
  const db = getDatabase();
  const [userData, setUserData] = useState({});

  //caputures current user from firebase db
  useEffect(() => {
    onAuthStateChanged(auth, (currentUser) => {
      if(currentUser) {
        const userId = currentUser.uid;
        const userRef = ref(db, "/Users/" + userId);
        onValue(userRef, (snapshot) => {
          const data = snapshot.val();
          setUserData(data);
          console.log(data)
        });
      }
    })
  }, []);

  return (
    <Fragment>
      <CharCard
        name={userData?.name}
        icon={userData?.icon}
        attack={userData?.skills?.attack?.level}
        defense={userData?.skills?.defense?.level}
      />
    </Fragment>
  );
};

export default Character;