React Native Firebase Firestore 數據未正確獲取

Question

我只想獲取我在我的應用程序中調用的數據，它工作得很好，但是為什么我會得到所有這些不必要的部分，如何刪除它們，感謝您的支持。 請檢查數據庫圖像並顯示 output 圖像如何顯示。 我不想要那些我標記紅線的部分，因為我沒有在我的代碼中調用它們。 是 FlatList 問題還是 Firebase 問題？

import React, { useState, useEffect } from 'react';
import { ActivityIndicator, FlatList, View, Text } from 'react-native';
import {firebase} from '../config';

const Testing = ({ navigation }) =>{
  const [loading, setLoading] = useState(true); // Set loading to true on component mount
  const [users, setUsers] = useState([]);
  useEffect(() => {
    const subscriber = firebase.firestore()
      .collection('testing')
      .onSnapshot(querySnapshot => {
        const users = [];
  
        querySnapshot.forEach(documentSnapshot => {
          users.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });
  
        setUsers(users);
        setLoading(false);
      });
  
    // Unsubscribe from events when no longer in use
    return () => subscriber();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  return (
    <FlatList
      data={users}
      renderItem={({ item }) => (
        <View style={{ height: 50, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>ID: {item.One}</Text>
          <Text>Name: {item.five}</Text>
        </View>
      )}
    />
  );}   
export default Testing;

Answer 1

看起來您的后端數據不完整或“可選”。 如果您不想渲染空字段，您可以有條件地渲染它們。

對於缺少這兩個屬性的users數據，您可以過濾data屬性。

例子：

<FlatList
  data={users.filter(({ One, five }) => One || five)}
  renderItem={({ item }) => (
    <View style={{ .... }}>
      {item.One && <Text>ID: {item.One}</Text>}
      {item.five && <Text>Name: {item.five}</Text>}
    </View>
  )}
/>