Uncaught TypeError: pushRoom.on is not a function 我 console.log 它但不知道如何解決它

Question

我的主要源代碼是

import { useCookies } from "react-cookie";
import { connect } from "react-redux";
import axios from "axios";
import {  getDownloadURL, getStorage } from "firebase/storage";
import { ref, getDatabase, child } from "firebase/database";
import Map from "./Map";
import ModalWindow from "../NewFeedComponents/Modal";
import AnnouncementMessage from "../NewFeedComponents/Announcement";
import "./listUsers.css";
import NavbarListPage from "../NewFeedComponents/NavbarNewFeed";
import Loader from "../NewFeedComponents/loader/Loader";
import Loader2 from "../NewFeedComponents/loader/loader2";

/**
 * @param {*} props
 */

function ListUsers() {
  const [cookies] = useCookies(["userName"]);
  const [radius, setRadius] = useState("");
  const [list, setList] = useState({
    success: false,
    err: "",
  });

  const [isColorBtn, setColorBtn] = useState("FindMe");
  const [isShowLoader, setIsShowLoader] = useState(false);
  const [isShowMap, setShowMap] = useState(false);
  const [user, setUser] = useState("");
  const [url, setUrl] = useState("");
  const [loader, setLoader] = useState();
  const database = ref(getDatabase());
  const pushRoom = child(database, `${cookies.userName}`);
  useEffect(() => {
    const loader = Math.floor(Math.random() * 10);
    setLoader(loader);
  }, []);

  useEffect(() => {
    const handleNewMessages = async (snap) => {
      if (snap.val()) {
        Object.entries(snap.val()).forEach((el) => {
          const [, obj] = el;
          obj && setUser(obj);
        });
        pushRoom.remove();
      }
    };
    console.log(pushRoom);
    pushRoom.on("value", handleNewMessages);
    return () => {
      pushRoom.off("value", handleNewMessages);
    };
  }); 

在我 console.log(pushRoom) 它顯示undefined但是當我 console.log(pushRoom.on) 它顯示

_orderByCalled: false
_path: Path {pieces_: Array(1), pieceNum_: 0}
_queryParams: QueryParams {limitSet_: false, startSet_: false, startNameSet_: false, startAfterSet_: false, endSet_: false, …}
_repo: Repo {repoInfo_: RepoInfo, forceRestClient_: false, authTokenProvider_: FirebaseAuthTokenProvider, appCheckProvider_: AppCheckTokenProvider, dataUpdateCount: 0, …}
key: (...)
parent: (...)
ref: (...)
root: (...)
_queryIdentifier: (...)
_queryObject: (...)
[[Prototype]]: QueryImpl

當我在流程頁面中設置我的個人資料時，我最終單擊提交鏈接到用戶頁面，然后它完全沒有顯示任何白頁，這就是為什么我檢查控制台->查看錯誤->檢查 console.log 就像我上面說的那樣。 非常感謝您的幫助！

Answer 1

您正在導入 SDK 的 v9 或更高版本，它們已從命名空間 API ( pushRoom.on("value", ... ) 切換到模塊化 ZDB974238714CA8DE634A7CE1DushRoom onValue(pushRoom, ... .導入onValue function，就像使用getDatabase和其他方法一樣。

所以像：

import { ref, getDatabase, child, onValue } from "firebase/database";
...
const unsubscribe = onValue(pushRoom, handleNewMessages);
return () => unsubscribe();

我建議將 Firebase 文檔放在手邊，並使用並排的 v8 和 v9 片段來簡化重寫，並閱讀升級指南。