React-Native 无法从 firestore 响应访问第二级



我有一个详细屏幕,用于检索具有以下结构的文档:

Object {
"category": Object {
"id": "3",
"name": "Concerts",
},
"date": Object {
"end": Object {
"nanoseconds": 543000000,
"seconds": 1660705200,
},
"start": Object {
"nanoseconds": 49000000,
"seconds": 1660698000,
},
},
"title": "Gravity Funk",
}

如果我显示";标题";它起作用,但我无法访问类似";category.name";,在导航堆栈中这个屏幕之前的列表中,我通过从Flatlist调用renderItem函数来解决它,但我不知道如何在这里做到这一点,而且我在Firestore中找不到任何关于这个doc((方法的文档。这是代码:

import React, {useState, useEffect, Component} from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Image, Dimensions } from 'react-native';
import { initializeApp } from 'firebase/app';
import { getFirestore, doc, getDoc } from 'firebase/firestore';
const firebaseConfig = {...};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const EventScreen = ({route, navigation}) => {
let category;
const eventId = route.params.eventId;
const [event, setEvent] = useState([]);
const getEvent = async (dbx) => {
let isMounted = true;
const eventDoc = doc(dbx, 'events', eventId);
const eventSnapshot = await getDoc(eventDoc);
const fetchedEvent = eventSnapshot.data();
setEvent(fetchedEvent);
return fetchedEvent;
}    
useEffect(  
() => {
getEvent(db);
}
,[])

return ( 
<View>
<Text>{event.title}</Text>
<Text>{event.category.name}</Text>
</View>
)
}

这是我收到的错误信息:

TypeError: undefined is not an object (evaluating 'event.category.name')

我通过为每个二级项目声明一个特定对象来解决它,如下所示:

const eventId = route.params.eventId;
const [eventCategory, setEventCategory] = useState({});
const [event, setEvent] = useState({});
const [eventDate, setEventDate] = useState({});

在getEvent函数中,我必须专门调用该项。

const eventDoc = doc(dbx, 'events', eventId);
const eventSnapshot = await getDoc(eventDoc);
const fetchedEvent = eventSnapshot.data();
setEvent(fetchedEvent);
setEventCategory (fetchedEvent.category);
setEventDate (()=>({
start: fetchedEvent.date.start.toDate().toString(),
end: fetchedEvent.date.end.toDate().toString()
}));

注意我是如何为setEventDate调用函数的,因为它是来自firestore的时间戳。我不知道这是否是正确的方法,但它有效。

最新更新