React Native Firebase - State无法在第一次加载时检索

Question

我使用useEffect在react-native应用程序的初始屏幕加载上检索一些用户和组数据。以下代码在这里:

const [groupInfo, setGroupInfo] = useState([]);
//Called on INITIAL rendering
useEffect(() => {
async function getGroupData() {
let groupCode = '';
//Retrieve group code from user
await getDoc(doc(db, 'users', email)).then(userSnapshot => {
if (userSnapshot.exists()) {
groupCode = userSnapshot.data()['group_code'];
}
else { console.log('No user with that email exists!'); }
}).catch(err => {
console.log(err);
});
//Retrieve group information from user
await getDoc(doc(db, 'groups', groupCode)).then(groupSnapshot => {
if (groupSnapshot.exists()) {
setGroupInfo(groupSnapshot.data());
}
else { console.log('No group with that code exists!'); }
}).catch(err => {
console.log(err);
});
}
getGroupData();
}, [email]);

问题是，当我试图渲染这对我的return声明，我得到一个错误。我之前已经记录了我的数据，这工作得很好，但似乎应用程序首先加载视图。以下是react渲染代码和错误:

return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.headerLeft}>Goals</Text>
<Text style={styles.headerRight}>Week of 11/20/22</Text>
</View>
<Text style={styles.prize}>Prize: Winner gets a free starbucks drink!</Text>
{/*<View style={styles.goalBox}>
<Text>Workout 3x per week</Text>
<CheckBox style={styles.checkbox}/>
</View> */}
{/* TODO edit prize screen */}
<Button title="Edit prize" />

<View style={styles.memberHeader}>
<Text style={styles.headerLeft}>Members</Text>
<Text style={styles.numMembers}>4</Text>
</View>
{
groupInfo['members'].map((memberName, index) =>
<View style={styles.member}>
<Text style={styles.memberText}>{memberName}</Text>
</View>
)
}

<Button title="Invite member" />
</View>
);

错误:

ERROR  TypeError: Cannot read property 'map' of undefined
This error is located at:
in ScreenViewGroup (created by SceneView)

编辑:

所以我认为问题是在组件被渲染的同时，数据正在被加载。我仍然收到相同的错误，但我注意到，当我编辑我的代码，数据被自动加载。

文本字符串似乎也可以正确渲染，但不是数组。

Answer 1

所以我找到了一个解决方法。通过声明我的初始数组的值，React将把这些值填充为默认值，并在加载时立即将它们更改为firebase值。