试图从firebase导入数据时,我被抛出了这个错误:REACT:TypeError:无法读取未定义的属性(读取“map”)。
制定一个项目,监控云功能的运行状况以及它们是否正常工作。任何帮助都将不胜感激。:)
app.js-地图功能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:
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;
卡片/索引。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>
);
}
}
添加未定义
的检查,然后在未定义上执行. map()
,检查然后仅在不为空或未定义时调用,
<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;
});
这是newcase.js组件: 在服务器端,我返回虚拟数据:
我正在使用webpack,浏览器中出现以下错误: 编译时没有错误或警告。 validator.js的第15行如下所示:
如果函数在组件中,那么一切都很好。如果我把它单独取出并导出到一个组件中,那么我会得到一个错误TypeError:不能读取未定义的属性(读取'reduce')
问题内容: 我正在尝试使用移动应用程序做一个简单的hello world firebase函数,我想记录用户ID,以便可以看到该函数确实起作用。这是我当前的JavaScript代码: 当新数据写入特定的数据库表时,它会触发,但是会出现此错误: 通知数据库如下所示: 问题答案: 您需要安装最新的firebase-functions和firebase-admin: 为了能够使用新的API,请在此处查看
我是Firebase函数的新手,在官方文档中看到了一些变化,但是当我在做一个通知系统时,当我试图获取我的令牌id时,它抛出了这个错误。 我的代码 错误 无法在导出处读取未定义的属性“val”.js user_code。(/user_code/node_modules/火库函数/库/云函数.js:112:27) 在下一个 (本机) 在 /user_code/node_modules/火基函数/库/云
TypeError:无法读取未定义的属性(读取“to isoString”)