[英]Can't get data from firebase in react chart
I'm using ApexChartJs for my react project, but when I tried to fetch dynamic data from my firebase database, then show me undefined
.我在我的 React 项目中使用 ApexChartJs,但是当我尝试从我的 firebase 数据库中获取动态数据时,然后显示undefined
。
here is my part of code from my project:这是我项目中的部分代码:
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);
data in the firebase look like: firebase 中的数据如下所示:
firebase configure file: firebase 配置文件:
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 };
If your firebase app is well set-up and configured appropriately, the main issue that may lead an undefined
query result is that the result are still being loaded.如果您的firebase应用程序设置正确且配置正确,则可能导致undefined
查询结果的主要问题是结果仍在加载中。
To overcome this, you should update your series
state whenever the loading
property changes (along with query result snapshot
changes):为了克服这个问题,您应该在loading
属性更改时更新您的series
state(连同查询结果snapshot
更改):
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]);
You should provide alternative error
handling as well for state update.您还应该为 state 更新提供替代error
处理。
A common error source would be the lack of privileges to read and write from the configured Firestore DB highlighted by below error message:一个常见的错误来源是缺乏从配置的Firestore DB 读取和写入的权限,以下错误消息突出显示:
FirebaseError: Missing or insufficient permissions
To allow all reads and writes for test only mode (should never be the case for a production system) , you can set below Security Rules for the database:要允许仅测试模式的所有读取和写入(生产系统永远不应该是这种情况) ,您可以为数据库设置以下安全规则:
// Allow read/write access to all users under any conditions
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
You can read more on Cloud Firestore Security Rules in the official documentation .您可以在官方文档中阅读有关Cloud Firestore 安全规则的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.