React Native从数组值渲染组件/函数失败求助

我尝试在React Native中基于Firestore返回的数组渲染组件，控制台能正常打印数组内容，但屏幕始终显示空白，无法渲染目标组件。

现有代码 #

主组件 #

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数据获取函数 #

从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')
  }


}

待渲染子组件 #

尝试用来渲染单个元素的组件：

function singleElement(text) {
return (
{text}
)
}

问题原因 #

1. 异步数据未触发组件更新：getItems中的Firestore请求是异步操作，函数执行后直接返回undefined，JSX渲染时没有内容；后续数组更新在回调中完成，但局部数组items不会触发组件重新渲染。
2. 未使用React状态管理数据：没有用useState存储数据，数据变化无法通知组件更新。
3. 子组件写法不合法：singleElement直接返回{text}，React Native中文本必须用<Text>组件包裹，且参数传递不符合React组件props规范。

解决方案 #

以下是修正后的完整代码：

import { useState, useEffect } from 'react';
import { View, Text, ScrollView } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/firestore';
// 导入你的auth配置，根据实际路径调整
import { auth } from '../path-to-your-auth-config';

const GeneratedHistory = () => {
  // 用useState存储数据，触发组件更新
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 异步获取数据
    const fetchItems = async () => {
      try {
        const querySnapshot = await firebase.firestore()
          .collection("Generated")
          .where("username", "==", auth.currentUser?.email)
          .get();
        
        // 转换数据格式
        const fetchedItems = querySnapshot.docs.map(doc => ({
          qrImage: doc.get("qrImage"),
          qrText: doc.get("qrText"),
          time: doc.get("time"),
        }));
        
        // 更新状态，触发组件重新渲染
        setItems(fetchedItems);
      } catch (error) {
        alert('发生错误');
      }
    };

    fetchItems();
  }, []);

  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>
          {/* 遍历状态数组渲染子组件，添加key属性 */}
          {items.map((item, index) => (
            <SingleElement key={index} text={item.qrText} />
          ))}
        </ScrollView>
      </View>
    </View>
  );
};

// 修正子组件写法，用Text包裹文本，正确接收props
const SingleElement = ({ text }) => {
  return <Text>{text}</Text>;
};

export default GeneratedHistory;

关键修正点 #

• 使用useEffect在组件挂载时执行异步数据请求，避免重复调用
• 用useState管理数据，状态更新时自动触发组件重新渲染
• 改用async/await简化异步代码逻辑
• 子组件返回合法的React Native元素，用<Text>包裹文本
• 列表渲染时添加key属性，符合React列表渲染规范

内容的提问来源于stack exchange，提问作者Taco