从React Native中的数组值呈现组件

ykejflvf  于 2022-12-14  发布在  React
关注(0)|答案(1)|浏览(169)

我正在尝试从数组值呈现组件/函数。

主要功能

const GeneratedHistory = () => {
  return (
    <View style={styles.container}>

      <View style={styles.headerWrapper}>

        <Text variant="headlineLarge" style={styles.headersText}>Historia</Text>
        <Text variant='labelMedium'>Generowane kody</Text>

      </View>

      <View style={styles.mainWrapper}>

        <ScrollView>

          {getItems()}

        </ScrollView>

</View>
 </View>

我从Firestore中检索值,并将所需内容保存到名为Items数组中

function getItems() {

  const items = [];

  try {
    firebase.firestore().collection("Generated").where("username", "==", auth.currentUser.email)
      .get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          items.push({
            qrImage: doc.get("qrImage"),
            qrText: doc.get("qrText"),
            time: doc.get("time"),
          })
        });

        items.map((item) => {
          console.log(item.qrText)
        })
      });
  } catch (error) {
    alert('Error occured')
  }

}

接下来,我Map数组,打印到控制台,并尝试呈现名为SingleElement的函数。
函数singleElement(文本){ return({文本}
)}的
登录到控制台工作的罚款,但我不能渲染的功能。屏幕只是停留在白色。

dw1jzc5e

dw1jzc5e1#

所以,我必须使用异步函数,在我的例子中,我在窗口打开时获取数据并将其保存到数组中。

useEffect(() => {
    async function fetchData() {
      todoRef
        .onSnapshot(
          querySnaphsot => {
            const items = []
            querySnaphsot.forEach((doc) => {
              const { qrImage, qrText, time } = doc.data()
              items.push({
                id: doc.id,
                qrImage,
                qrText,
                time,
              })
              setItems(items);

            })
          }
        )

    } fetchData()
  }, [])

然后Map元素并在组件中显示它们。

items.map((item) => {
             return <YourComponent key={item.id} text={item.qrText} time={item.time}>
              </YourComponent> 
          })
          }

相关问题