Reactjs Can'；t从Firebase数据库读取数据

我做了一个小的React应用程序从Firebase数据库读取数据

没有明显的错误，除了下面的“加载”钩子始终为true，但如果一切正常，则应该为false

以下是应用程序的代码（或可在此处获得）：

Firebase DB的形状

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;

import React，{useffect，useState}来自“React”；
从“/config/firebase”导入{db}”；
导入“/App.css”；
函数App（）{
const[list，setList]=useState（[]）；
const[loading，setLoading]=useState（true）；
useffect（异步（）=>{
试一试{
db.ref（“pseudos”）.on（“值”，（快照）=>{
setList（snapshot.val（））；
设置加载（假）；
});
}捕捉（错误）{
console.log（“err”，err）；
}
}, []);
useffect（（）=>{
控制台日志（“加载”，加载）；
}，[装载]；
如果（装载）{
返回加载…
；
}
返回(
列表
{列表&
list.map（（l，i）=>(
{l}
))}
);
}
导出默认应用程序；

您确定用户具有读取数据的权限吗？如果您不确定，请检查应用程序的日志输出，以查看权限被拒绝的消息

另一种永不错过此类问题的方法是在上的

中添加错误回调：

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

您确定用户具有读取数据的权限吗？如果您不确定，请检查应用程序的日志输出是否有权限被拒绝的消息。哦，我想规则是“false”，我会检查这个now@FrankvanPuffelen你可以回答，就是这样！！