Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Unable to download data from Firebase - TypeError: undefined is not an object

$
0
0

I'm trying to download user profiles from firebase and use them in a component. I'm having trouble with the async firebase function and useState. In the code below "profiles" repeatedly gets concatenated but it doesn't seem to update the "cards" prop in the Swiper component which still gets an empty array.

import * as React from 'react';import Swiper from 'react-native-deck-swiper'import { Card } from '../components/Card'import { View } from '../components/Themed';import firebaseSDK from '../database/firebase'export default function HomeScreen() {  const [profiles,setProfiles] = React.useState([])  firebaseSDK.db    .ref('userProfile')    .once('value')    .then((snapshot)=>{      //this line prints the profiles correctly      console.log("snapshot Val profiles : " + JSON.stringify(Object.values(snapshot.val())))      setProfiles(prevState => prevState.concat(Object.values(snapshot.val())))    })    return (<View style={styles.container}><Swiper      cards={profiles}      renderCard={Card}    />}

using this code I get

TypeError: undefined is not an object (evaluating 'cards.length')

Even though the console log shows "profiles" is continuously growing bigger as it gets repeatedly concatenated. What's the process to access the data correctly?

EDIT:

some more details about the code

the data I'm downloading looks like this :

{"id1":{    avatar: "https://placebear.com/200/300",    displayName: 'Fakeman Fakeaccount',    AboutMe: '16 miles away',    uid:1234  },"id2":{    avatar: "https://placebear.com/200/300",    displayName: 'Joanna, 19',    AboutMe: '2 miles away',    uid:1234  },"id3":{    avatar: "https://placebear.com/200/300",    displayName: 'Charlie, 32',    AboutMe: '24 miles away',    uid:1234  },}

cards takes an array of objects, which is why I initialized useState with an "[]" and I ran Object.values on snapshot.val() to turn it into an array.

The Card component:

export const Card = ({ avatar, displayName, AboutMe, uid }) => (<Tile    // imageSrc={avatar}    imageSrc={{uri:avatar}}    imageContainerStyle={styles.imageContainer}    activeOpacity={0.9}    title={displayName}    titleStyle={styles.title}    caption={AboutMe}    captionStyle={styles.caption}    containerStyle={styles.container}    key={uid}    featured  />)

Swiper takes an array of data (cards prop) and uses it to populate multiple Card components (renderCard prop)


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>