[英]Getting error when trying to pull data from firebase collection REACT: TypeError: Cannot read properties of undefined (reading 'map')
trying to import data from firebase, however i get thrown this error back:REACT: TypeError: Cannot read properties of undefined (reading 'map').试图从 firebase 导入数据,但是我被抛回了这个错误:反应:类型错误:无法读取未定义的属性(读取“地图”)。
Making a project that monitors health of cloud functions and if they are working.制作一个项目来监控云功能的健康状况以及它们是否正常工作。 Any help would be much appreciated.
任何帮助将非常感激。 :)
:)
app.js- the map function is in app.js { app.js- map function 在 app.js {
45 | </Divider>
46 |
47 | {user ? (
> 48 | <Card.Group itemsPerRow="4">
| ^ 49 | {cloudFucntions.map((cloudFunction) => {
50 | return (
51 | <Cards
} }
import "./App.css";
import "semantic-ui-css/semantic.min.css";
import { Container, Divider, Card } from "semantic-ui-react";
import Header from "./components/Header";
import Cards from "./components/Cards/index";
import { useState, useEffect } from "react";
import { AppProvider } from "./Context/Context.js";
import "firebase/compat/auth";
import {} from "firebase/firestore";
import * as FirestoreService from "./components/service/firebase";
import firebase from "@firebase/app-compat";
function App() {
const [user, setUser] = useState(null);
const [cloudFucntions, setCloudFucntions] = useState();
const [setError] = useState();
useEffect(() => {
firebase.auth().onAuthStateChanged((user) => {
setUser(user);
const unsubscribe = FirestoreService.getCloudFunctionItems(
(querySnapshot) => {
const updatedCloundFunctions = querySnapshot.docs.map((docSnapshot) =>
docSnapshot.data()
);
setCloudFucntions(updatedCloundFunctions);
console.log(updatedCloundFunctions);
},
(error) => setError("list-item-get-fail")
);
return unsubscribe;
});
}, []);
return (
<AppProvider>
<div>
<Container>
<Header />
<Divider horizontal section>
Cloud Function Monitor
</Divider>
{user ? (
<Card.Group itemsPerRow="4">
{cloudFucntions.map((cloudFunction) => {
return (
<Cards
key={cloudFunction.id}
cloudFunctions={cloudFunction}
></Cards>
);
})}
</Card.Group>
) : (
<h2> Please sign in using the button in the top right. </h2>
)}
</Container>
</div>
</AppProvider>
);
}
export default App;
firebase.js: firebase.js:
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { initializeApp } from "firebase/app";
import {
getFirestore,
query,
orderBy,
onSnapshot,
collection,
getDoc,
getDocs,
addDoc,
updateDoc,
doc,
serverTimestamp,
arrayUnion,
} from "firebase/firestore";
const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx.firebaseapp.com",
projectId: "dxxxxdata-d1",
storageBucket: "xxx-reportingdata-d1.appspot.com",
messagingSenderId: "xxxxxxxx",
appId: "xxxxxxxx",
measurementId: "G-xxxxxxx",
};
firebase.initializeApp(firebaseConfig);
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export const getCloudFunctionItems = (snapshot, error) => {
const itemsColRef = collection(db, "cloudFunctionsMonitor");
const itemsQuery = query(itemsColRef);
return onSnapshot(itemsQuery, snapshot, error);
};
export const getCloudFunction = (cloudFunctionId) => {
const cloudDocRef = doc(db, "cloudFunction", cloudFunctionId);
return getDoc(cloudDocRef);
};
export const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: "select_account" });
export const signInWithGoogle = () => auth.signInWithPopup(provider);
export default firebase;
cards/index.js卡片/index.js
import "../../App";
import "semantic-ui-css/semantic.min.css";
import { Icon, Card, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import React, { Component } from "react";
import "semantic-ui-css/semantic.min.css";
export default class Cards extends Component {
render() {
return (
<Card color={this.props.cloudFunction.functionColor}>
{/* <h1> lastrunload: {this.propps.app.updatedCloundFunctions}</h1> */}
<Card.Content>
<Card.Header>
{this.props.cloudFunction.cardFunctionHeader}
</Card.Header>
<Card.Description>
{this.props.cloudFunction.cardFunctionDescription}
</Card.Description>
</Card.Content>
<Card.Content extra>
<Icon name="cog" />
{this.props.cloudFunction.functionRunTime}
<br />
<Icon name="clock" />
{this.props.cloudFunction.functionLastRun}
<br />
<Icon name="angle double down" />
{this.props.cloudFunction.functionLastInsert}
</Card.Content>
<Card.Content extra>
<div className="ui two buttons">
<Button basic color={this.props.cloudFunction.functionColor}>
{this.props.cloudFunction.functionButton}
</Button>
</div>
</Card.Content>
</Card>
);
}
}
add checking for the undefined
, before going for .map()
on undefined, checking and then call only when not null or undefined,添加对 undefined 的检查,在对
undefined
进行.map()
之前,检查然后仅在不是 null 或 undefined 时调用,
<Card.Group itemsPerRow="4">
{cloudFucntions && cloudFucntions.map((cloudFunction) => {
return (
<Cards
key={cloudFunction.id}
cloudFunctions={cloudFunction}
></Cards>
);
})}
</Card.Group>
const unsubscribe = FirestoreService.getCloudFunctionItems(
(querySnapshot) => {
const updatedCloundFunctions = querySnapshot && querySnapshot.docs && querySnapshot.docs.map((docSnapshot) =>
docSnapshot.data()
);
setCloudFucntions(updatedCloundFunctions);
console.log(updatedCloundFunctions);
},
(error) => setError("list-item-get-fail")
);
return unsubscribe;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.