This has been driving me crazy for weeks now.. I am new to react native and firestore. I'm trying to map an array of objects which I've fetched from firestore.

Here's my code for the feed page:

const Feed = () => {
  const navigate = useNavigation()
  const handleAddBuddy = () => {
    navigate.replace("AddBuddy")
  } 

  const [buddyList, setBuddyList] = useState([])
  
  console.log(buddyList)

  useEffect( async () =>{
    const myCol= collection(db,"Users", auth.currentUser.uid, "BuddyList")
    const querySnapshot = await getDocs(myCol)
    const unsub = querySnapshot.forEach((doc) =>{
        setBuddyList(doc.data())
    })
    return unsub

  }, [])


  return (

    <SafeAreaView style={styles.container}>
  {
    buddyList.map(({FirstName}) => (
      <FeedCard name={FirstName} />        
      ))
  }

I am trying to render a Feedcard component and pass the prop 'name' as the 'FirstName' from Firebase.

I have tried mapping it, using flatlists, just about everything I have been able to find online but I am always getting errors from the JSX. With this code I am getting error "undefined is not a function"

I believe I am successfully fetching the data from firebase, because here is what I'm getting in my console - these are all documents added to "buddylist" the documents themselves have an auto generated ID under the collection "BuddyList"

Object {
  "FirstName": "Joslin",
}
Object {
  "FirstName": "Vanessa",
}
Object {
  "FirstName": "Kai",
}
Object {
  "FirstName": "Dad",
}
Object {
  "FirstName": "Mom",
}
Object {
  "FirstName": "Joslin",
}

Here is the full error showing in the console - If it helps, feed.js is a bottomtab navigator page nested within TabNavigator.js... and TabNavigator.js is a stack navigator screen nested within app.js (I used stack screens for the signup/login process and bottomtab for the main app UI)

    TypeError: undefined is not a function (near '...buddyList.map...')

This error is located at:
    in Feed (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by BottomNavigationRouteScreen)
    in BottomNavigationRouteScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by BottomNavigation)
    in RCTView (created by View)
    in View (created by BottomNavigation)
    in BottomNavigation
    in ThemedComponent (created by withTheme(BottomNavigation))
    in withTheme(BottomNavigation) (created by MaterialBottomTabViewInner)
    in MaterialBottomTabViewInner (created by MaterialBottomTabView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by MaterialBottomTabView)
    in MaterialBottomTabView (created by MaterialBottomTabNavigator)
    in Unknown (created by MaterialBottomTabNavigator)
    in MaterialBottomTabNavigator (created by TabNavigator)
    in TabNavigator (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

Any help would be appreciated. I have been stuck on this for way too long and I'm ready to move on..

CodePudding user response：

You are not handling the QuerySnapshot correctly. The documents returned are in the docs property of the snapshot. Moreover, you are assigning each returned document to the buddyList state variable, which turns it into an object instead of an array.

This

const unsub = querySnapshot.forEach((doc) =>{
  setBuddyList(doc.data())
})

should be

// Get the returned documents with their data in a new array 
const buddies = querySnapshot.docs.map(doc => doc.data())

// Assign that array to buddyList
setBuddyList(buddies)

CodePudding user response：

man!

Can you print the exactly error from your console, please?