Question

我做了一个小型的React App，从Firebase数据库中读取数据，

没有可见的错误，只是下面的“ loading”钩始终为true，但如果一切正常，则应该为false，

以下是以下应用的代码（或在https://github.com/Versifiction/firebase-api-github处可用）：

Firebase数据库的形状

apigithub-db9e8
  pseudos
    pseudo: "Versifiction"

src / config / firebase.js

import firebase from "firebase";

const config = {
  apiKey: value,
  authDomain: value,
  databaseURL: value,
};

firebase.initializeApp(config);

export const db = firebase.database();

src / App.js

import React, { useEffect, useState } from "react";
import { db } from "./config/firebase";

import "./App.css";

function App() {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(async () => {
    try {
      db.ref("pseudos").on("value", (snapshot) => {
        setList(snapshot.val());
        setLoading(false);
      });
    } catch (err) {
      console.log("err ", err);
    }
  }, []);

  useEffect(() => {
    console.log("loading ", loading);
  }, [loading]);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h1>List</h1>
      {list &
        list.map((l, i) => (
          <>
            <p key={i}>{l}</p>
            <a href={`http://www.api.github.com/users/${l}`}>Github Link</a>
          </>
        ))}
    </div>
  );
}

export default App;

Answer 1

您确定用户有权读取数据吗？如果不确定，请检查应用的日志记录输出中是否有权限被拒绝的消息。

另一种永远不会错过此类问题的方法是向on添加错误回调：

db.ref("pseudos").on("value", (snapshot) => {
  setList(snapshot.val());
  setLoading(false);
}, (error) => {
  console.error(error);
})

无法从Firebase数据库读取数据

1 个答案: