无法从 firestore 数据库读取数据以对本机项目做出反应

Question

I am relatively new to react natuve and I am reading data from my firestore db and I can see the title and id in my console after: console.log(doc.id, doc.data());

but the items dont show in my flatlist and it just displays a constant loading symbol

this is my code and i cannot figure out why it wont load into my flatlist. Any help is appreciated `

import { Pressable, Text, TextInput, View, StyleSheet,
SafeAreaView, FlatList, ActivityIndicator } from 'react-native'
import React, { useState, useEffect } from 'react'
import Exercise from '../../components/Exercise'
import { MaterialIcons } from '@expo/vector-icons'; 
import { auth, app, db, getFirestore, collection, addDoc, getDocs } from '../../firebase'


const WorkoutScreen = () => {
  
  const [exerciseTitle, setTitle] = useState('');
  const [exerciseList, setExerciseList] = useState([]);

  const addExercise = async() => {
    try {
      const docRef = await addDoc(collection(db, "Exercise"), {
        title: exerciseTitle,
        isChecked: false,
      });
      console.log("Document written with ID: ", docRef.id);
      setTitle("");
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  };

  const getExercise = async() => {
    const querySnapshot = await getDocs(collection(db, "Exercise"));
    querySnapshot.forEach((doc) => {
      console.log(doc.id, doc.data());
      setExerciseList({
        ...doc.data(),
        id: doc.id,
        title: doc.exerciseTitle,
      });
    });
  };

  useEffect ( () => {
    getExercise();
  }, []);
  
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}> 
      {/* heading */}
        <Text style={styles.heading}>Workout List</Text>
      {/* shopping items  */}
        <Text style={styles.noOfExercises}>0</Text>
      {/* delete all  */}
        <Pressable>
        <MaterialIcons name="delete" size={32} color="black" />
        </Pressable>  
      </View>
        {exerciseList.length > 0 ? (
        <FlatList
          data={exerciseList}
          renderItem ={({item}) => <ExerciseItem title={item.exerciseTitle}/>}
          keyExtractor={(item) => item.id}
        />
      ) : (
        <ActivityIndicator />
      )}
        <TextInput
        placeholder='Enter Excercise' 
        style={styles.input} 
        value={exerciseTitle} 
        onChangeText={(text) => setTitle(text)} 
        onSubmitEditing={addExercise} 
        /> 
      </SafeAreaView>
  )
}

export default WorkoutScreen

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

  header: {
    flexDirection: 'row',
    width: '90%',
    alignSelf: 'center',
    padding: 10,
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },

  heading: {
    fontWeight: '900',
    fontStyle: 'bold',
    fontSize: 30,
    flex: 1,
    marginTop: 20,
  },

  noOfExercises: {
    fontSize: 20,
    fontWeight: '500',
    marginRight: 20,
  },

  input: {
    backgroundColor: 'lightgrey',
    padding: 10,
    fontSize: 17,
    width: '90%',
    alignSelf: 'center',
    marginTop: 'auto',
    borderRadius: 10,

  }
})

`

Answer 1

The problem is here:

setExerciseList({
  ...doc.data(),
  id: doc.id,
  title: doc.exerciseTitle,
}); 

You're setting exerciseList to be an object, yet your rendering code expects it to be an array:

{exerciseList.length > 0 ? ...

Since you don't define a length property in the object, it ends up always render the <ActivityIndicator /> .

What you'll want to do is set the entire array of documents in the state, for example with:

const getExercise = async() => {
  const querySnapshot = await getDocs(collection(db, "Exercise"));
  setExerciseList(querySnapshot.docs.map((doc) => {
    return { ...doc.data(), id: doc.id };
  });
};