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)