0
237
ViewsNo se pueden obtener datos de firebase en el gráfico de reacción
Estoy usando ApexChartJs para mi proyecto de reacción, pero cuando traté de obtener datos dinámicos de mi base de datos de Firebase, me muestra undefined .
aquí está mi parte del código de mi proyecto:
import React, { useEffect, useState } from "react"; import Chart from "react-apexcharts"; import { auth, db } from "./firebase"; import { useCollection } from "react-firebase-hooks/firestore"; const [dataPoint, setDataPoint] = useState([]); const query = db.collection("data"); const [snapshot, loading, error] = useCollection(query); const [series, setSeries] = useState([]); useEffect(() => { setSeries([ { name: "Desktops", data: snapshot?.docs.map((doc) => doc.data().value), }, ]); }, [snapshot]); console.log(series);los datos en la base de fuego se ven así:
archivo de configuración de base de fuego:
import firebase from "firebase"; // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyC2mfjPdIdXxGgJFqqVviw32xoaEMxxxxxx", authDomain: "chart-app-4591b.firebaseapp.com", projectId: "chart-app-4591b", storageBucket: "chart-app-4591b.appspot.com", messagingSenderId: "995691438244", appId: "1:995691438244:web:6d945f72ff51d444664631", measurementId: "G-2B9ZFG6E33", }; const app = firebase.initializeApp(firebaseConfig); const db = app.firestore(); const provider = new firebase.auth.GoogleAuthProvider(); const auth = firebase.auth; export { db, provider, auth };1 answers
Answer question0
Si su aplicación Firebase está bien configurada y configurada correctamente, el problema principal que puede generar un resultado de consulta undefined es que el resultado aún se está cargando.
Para superar esto, debe actualizar el estado de su series cada vez que cambie la propiedad de loading (junto con los cambios en la snapshot del resultado de la consulta):
const query = db.collection("data"); const [snapshot, loading, error] = useCollection(query); useEffect(() => { setSeries([ { name: "Desktops", data: snapshot?.docs.map((doc) => doc.data().value), }, ]); }, [loading, snapshot]); También debe proporcionar un manejo de error alternativo para la actualización de estado.
Actualizar (por el error de permiso)
Una fuente de error común sería la falta de privilegios para leer y escribir desde la base de datos Firestore configurada resaltada por el siguiente mensaje de error:
FirebaseError: Missing or insufficient permissionsPara permitir todas las lecturas y escrituras para el modo de solo prueba (nunca debería ser el caso para un sistema de producción) , puede configurar las siguientes reglas de seguridad para la base de datos:
// Allow read/write access to all users under any conditions service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if true; } } }Puede leer más sobre las reglas de seguridad de Cloud Firestore en la documentación oficial .