如何将 Firestore 中的这些数据显示到我的 React Native Flatlist 中

Question

第一次使用 Firestore 和 React Native。我有一个非常简单的 Firestore，用于我正在为朋友构建的高尔夫联赛应用程序。包含 2 个字段、高尔夫球手姓名和得分的球员文档。我只是想通过 setGolfer 获取数据并进入高尔夫球手状态。到目前为止，我获取的数据出现在 console.log(objectsArray) 中，但是从显示在呈现列表中的 firestore 中获取的对象是空白的，但是来自 useState 的高尔夫球手信息可以很好地呈现所有字段。 我省略了一些代码以节省空间。感谢您的帮助。

import firestore from '@react-native-firebase/firestore';
export default function App() {
  const [golfer, setGolfer] = useState([
    {golfer: 'dave', score: 50, key: '1'},
    {golfer: 'mike', score: 60, key: '2'},
    {golfer: 'jon', score: 50, key: '3'},
    {golfer: 'red', score: 50, key: '4'},
    {golfer: 'tom', score: 50, key: '5'},
    {golfer: 'jeryD', score: 50, key: '6'},
  ]);


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

    const getData = () => {
    firestore()
    .collection('Players')
    .get()
    .then(querySnapshot => {
        const objectsArray = [];
        querySnapshot.forEach(player => {
            objectsArray.push(player.data());
        });
        setGolfer([...golfer, ...objectsArray])
});

  };

  const [on, setOn] = useState(false);

  const [events, setEvents] = useState([
    {tourney: 'US OPEN', date: '6/01/2021', teetime: '8am', key: '11'},
    {tourney: 'Caz Park', date: '7/04/2021', teetime: '8am', key: '12'},
    {tourney: 'Pebble Beach', date: '8/11/2021', teetime: '8am', key: '14'},
    {tourney: 'Snooty Bay', date: '9/01/2021', teetime: '8am', key: '15'},
    {tourney: 'Masters', date: '9/21/2021', teetime: '8am', key: '16'},
  ]);

  };

  
      
  };

  return (
    <>
      <TouchableWithoutFeedback>
        <View style={styles.container}>
          <Header />
          <Text onPress={() => setOn(false)}>Standings</Text>
          <Text onPress={() => setOn(true)} style={styles.golfer}>
            Events
          </Text>
          <View style={styles.content}>
            <View style={styles.lables} />
            <Text style={styles.golfer}> Golfer</Text>
            <Text style={styles.rank}>Rank</Text>
            <View style={styles.list}>
              <FlatList
                data={golfer}
                keyExtractor={(item, index) => {
                  return item.key;
                }}
                key={golfer.id}
                renderItem={({item}) => (
                  <TodoItem item={item} pressHandler={pressHandler} />
                )}
              />
              <AddTodo submitHandler={submitHandler} />
            </View>
          </View>
          <View style={styles.content2}>
            <View style={styles.list}>
              <View style={styles.lables}>
                <Text style={styles.event}> Event</Text>
              </View>
              <FlatList
                data={events}
                keyExtractor={(item, index) => {
                  return item.key;
                }}
                key={golfer.key}
                renderItem={({item}) => (
                  <Events item={item} key={item} deleteEvent={deleteEvent} />
                )}
              />
              <AddEvents submitEvent={submitEvent} key={events} />
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </>
  );
}

Answer 1

我建议两件事：

1. 删除useEffect之前的objectsArray声明

2. 遍历所有文档后只更新一次状态：

   useEffect(() => {
       getData();
   }, []);
   
   const getData = () => {
       firestore()
       .collection('Players')
       .get()
       .then(querySnapshot => {
           const objectsArray = [];
           querySnapshot.forEach(player => {
               objectsArray.push(player.data());
           });
           setGolfer([...golfer, ...objectsArray])
   });