reactjs - 如何在本机反应中使用 Firestore 数据？

Question

我已经设置了 firebase，我想使用从 Firestore 检索到的数据。我的 Firestore 看起来像这样：

我获取 Firestore 数据的函数：

export const getQuestionsAndScheduelesFromFS = async () => {
    const db = getFirestore();
    const docRefQuestions = doc(db, "questions2022", "question01");
    const docSnap = await getDoc(docRefQuestions);


    if (docSnap.exists()) {
        console.log("FS questions 2022", docSnap.data());

        return docSnap.data();
    } else {
        console.log("No such data: QUESTIONS2022!");

        return docSnap.data()
    }
}

这就是我的数据在 console.log 中的显示方式：

我如何使用/解开我从 Firestore 获得的问题和替代方案？Alternatives 是一个数组，而 question 是一个字符串。

我想要做的是在组件内显示数据。

这是我第一次使用带有 react native 的 Firestore，我真的需要帮助，谢谢 :)

Answer 1

据我了解，您只是不想显示从 firebase 获得的数据。在屏幕上使用 react-native。

下面的代码将从 Firebase 中获取数据，并将该数据存储在 useState 挂钩中，然后在屏幕上显示问题。请阅读有关useState和useEffect钩子的信息，它将对您有很大帮助。

export default function App() {
   // If you ever wan't state that changes throughout the app use the useState hook
   const [data,setData] = React.useState(null); 

  // Runs once the screen loads
  React.useEffect(()=>{
     const fetch = async = ()=>{ 
        const fetchedData = await getQuestionsAndScheduelesFromFS();
        setData(fetchedData);
     }
     fetch();
  },[]) 

  // Show blank screen or whatever you want while data is waiting to be initialized from the firebase data 
  if (data===null){
     return <></>
  } 
  

  return (
    <View style={{flex:1, justifyContent: 'center', alignItems:"center",}}>
         <Text> {data.question}</Text>
   </View>
  )

}