Блог

Я создал небольшое приложение React для чтения данных из базы данных 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 amp;
        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;
  

Вы уверены, что у пользователя есть разрешение на чтение данных? Если вы не уверены, проверьте выходные данные журнала вашего приложения на наличие сообщения об отказе в разрешении.

Другой способ никогда не пропустить проблему такого типа — добавить обратный вызов ошибки в on :

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