React Native Firebase - State 首次加载时无法检索

Question

I'm using useEffect to retrieve some user and group data on initial screen load on a react-native app. The following code for this is here:

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]);

The problem is that when I've tried to render this on my return statement, I get an error. I've logged my data before and that has worked fine but it seems that the app loads the view first. THe following react render code and error are below:

    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:

ERROR  TypeError: Cannot read property 'map' of undefined

This error is located at:
    in ScreenViewGroup (created by SceneView)

EDIT:

So I think the problem is that at the same time the component is being rendered, the data is being loaded in. I'm still receiving the same error but I've noticed that when I edit my code, the data gets loaded in automatically.

Text strings also seem to render in properly as well but just not the array.

Answer 1

So I found a work-around. By declaring my initial array with values, React will fill those values in as default values and immediately change them to the firebase values when they load.