React Native从Firestore获取数据后屏幕无内容显示问题求助

核心问题原因 #

• 遍历savedPosts发起的firestore单条post查询均为异步操作，不会阻塞后续代码执行。你在所有查询还未返回结果时就调用了setTourists(list)和setLoading(false)，此时list还是空数组。后续查询完成往list里push数据时，因为数组引用没有发生变化，React不会触发状态更新重渲染，所以页面看不到内容。
• 你使用map遍历发起请求但没有处理返回的Promise集合，也没有等待所有异步任务完成就更新状态，是问题的核心诱因。

修复后的核心代码 #

const [tourists, setTourists] = useState([]) // 初始化用空数组更合理，避免后续||[]的兼容处理
const [saved, setsave] = useState('');
const {user, logout} = useContext(AuthContext);
const [userData, setUserData] = useState(null);
const [loading, setLoading] = useState(true);

const getUser = async () => {
  try {
    const documentSnapshot = await firestore()
      .collection('users')
      .doc(user.uid)
      .get();
    
    if (documentSnapshot.exists) {
      const rawUserData = documentSnapshot.data();
      setUserData(rawUserData);
      const savedPosts = rawUserData.savedPosts || [];
      
      // 收集所有post查询的Promise，等待全部请求完成
      const postQueryPromises = savedPosts.map(postId => 
        firestore().collection('posts').doc(postId).get()
      );
      const postSnapshots = await Promise.all(postQueryPromises);
      const touristsList = postSnapshots.map(snapshot => snapshot.data());
      
      // 所有数据获取完成后再统一更新状态
      setTourists(touristsList);
    }
  } catch (error) {
    console.error('数据获取异常：', error);
  } finally {
    // 无论请求成功失败都关闭loading
    setLoading(false);
  }
}

useEffect(() => {
  getUser();
}, []);

return (
  <View style={{flex: 1, marginTop: Constants.statusBarHeight}}>
    {!loading ? (tourists.map((object, index) => (
      // 注意给每一项渲染加上唯一key属性，建议用post的id而非index
      <View key={object.id || index}>
        {/* 你的渲染逻辑 */}
      </View>
    ))) : <LoadingView />}
  </View>
);

额外优化建议 #

• 列表渲染的每一项加上唯一key属性，优先使用数据本身的唯一id，避免使用数组下标，减少不必要的渲染损耗和警告
• tourists状态初始化直接设为空数组，不用设为null，后续渲染时不需要再做兼容处理
• 增加异常捕获和finally逻辑，避免请求失败后loading一直处于开启状态，页面无响应

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