undefined 不是 object on react-native expo with firestore

Question

I would like to have some help with my codes. I am currently developing a quiz application. I need to get my questions and answers from my firestore data base. but when I am retrieving data I always get the error undefined is not an object(evaluating '_userDoc.incorrect_answer') help me.

this is my code

import { StyleSheet, Text, TouchableOpacity, View, SafeAreaView, ScrollView, FlatList, Image, Alert, BackHandler } from 'react-native'
import { StatusBar } from 'expo-status-bar'
import React, { Component, useEffect, useState } from 'react'
import { doc, setDoc, Timestamp, getDoc } from "firebase/firestore"; 
import { auth,db } from '../config';

const shuffleArray=(array)=> {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
  }

const Quiz  = ({navigation}) => {
    const [isActive, setIsActive] = useState(false)
    const[userDoc, setUserDoc] = useState();
    const [options, setOptions] = useState([]);
    const [loading, setLoading] = useState(false);

   let docu = "question"+2;
    const myDocs = doc(db, "subject", docu)
   
useEffect(()=>{
    getQuiz();
    },[])

const getQuiz = async()=>{
    setLoading(true);
    getDoc(myDocs)
    .then((snapshot) =>{
        if(snapshot.exists){
            setUserDoc(snapshot.data())
            setOptions(generateOptionsAndShuffle(userDoc))
        }else{
            alert("No Doc FOUND")
        }
    })
    .catch((error)=>{
    alert(error.message)
    })
}
const generateOptionsAndShuffle=(_userDoc)=>{
    let options = [..._userDoc.incorrect_answer];
    options.push(_userDoc.correct_answer);
    shuffleArray(options)
    console.log(options)
    return options
  }
  
    const thisHasPress=()=>{
        setIsActive(current => !current);
    }

    let energy = 5;
    let score =0;
    
    return (
        <SafeAreaView style={styles.container}> 
        <StatusBar style="dark" />
       <View style={styles.headerContainer}>
           <Text style={styles.headerText}>THIS IS QUIZ</Text>
       </View>
       
       <View style={styles.questionContainer}>
           <Text style={styles.questionText}>{userDoc?.question || ''}</Text>
       </View>      
           <View style={styles.buttonChoicesContainer}>
           
               <TouchableOpacity style={ isActive ? styles.buttonChoicesSelected : styles.buttonChoices}>
                <Text style={isActive ? styles.buttonChoicesTextSelected : styles.buttonChoicesText}>{options[0] || ''}</Text>
               </TouchableOpacity >
               <TouchableOpacity style={ isActive ? styles.buttonChoicesSelected : styles.buttonChoices} onPress={thisHasPress} >
                   <Text style={isActive ? styles.buttonChoicesTextSelected : styles.buttonChoicesText}>{options[1] || ''}</Text>
               </TouchableOpacity>
               <TouchableOpacity style={ isActive ? styles.buttonChoicesSelected : styles.buttonChoices} onPress={thisHasPress} >
                   <Text style={isActive ? styles.buttonChoicesTextSelected : styles.buttonChoicesText}>{options[2] || ''}</Text>
               </TouchableOpacity>
               <TouchableOpacity style={ isActive ? styles.buttonChoicesSelected : styles.buttonChoices} onPress={thisHasPress} >
                   <Text style={isActive ? styles.buttonChoicesTextSelected : styles.buttonChoicesText}>{options[3] || ''}</Text>
               </TouchableOpacity>
           </View>  
       <View style={styles.footer}>
           <TouchableOpacity style={styles.footerButton} onPress={()=>{ navigation.navigate("Dashboard") }}>
               <Image source={require('../assets/home-dark.png')} 
                           style={styles.navIcons}
                           resizeMode="contain"/>
           </TouchableOpacity>
           <TouchableOpacity style={styles.footerButtonReversed} onPress={()=>{ if(energy!=0){energy=energy-5};score++; navigation.navigate("Result",{ energy: energy, score: score}); console.log(energy) }}>
            <Text>SUBMIT</Text>
           </TouchableOpacity>
           
       </View>
   </SafeAreaView>
    )
  }


export default Quiz

I already tried searching for many solutions but it isn't working.

Answer 1

You may try replacing this line in your getQuiz function

setOptions(generateOptionsAndShuffle(snapshot.data()))