為什么我的 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;