import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import {Card, CardContent, CardActions, Typography, IconButton} from '@material-ui/core'; import firebase from './firebase'; class LikeMusicList extends React.Component{ render () { let db = firebase.firestore(); let snapshot = db.collection("likes"); let list = [] snapshot.get().then(function(querySnapshot) { if (querySnapshot) { querySnapshot.forEach(function(item){ fetch(`https://itunes.apple.com/lookup?id=${item.id}&entity=album`).then(r => r.json()).then(r => { list.push(r.results[0]); console.log(list); }).catch(e => console.log(e)); }) } else { console.log("No such document!"); } }).catch(function(error) { console.log("Error getting document:", error); }); //console.log(list); return ( <div> {console.log(list)} {list.map(item => { <Card key={item.collectionId} className={classes.card}> <CardContent> <Typography variant="subtitle1"> {item.artistName}</Typography> <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography> </CardContent> <img src = {item.collectionViewUrl} alt = {item.collectionName}></img> </Card> })} </div> ); }; } export default LikeMusicListQuiero hacer la representación de estos datos con la obtención de los álbumes en Itunes. Pero debido a un problema de sincronización, a cambio, la 'lista' de varialbe está vacía. Creo que el código 'snapshot.get().~' se ejecuta antes del retorno, pero el resultado fue inverso. ¿Cómo soluciono este problema?
Resuelve el problema usando el estado y moviendo la función firestore para reaccionar a la función del ciclo de vida llamada componenteDidMount:
import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import {Card, CardContent, CardActions, Typography, IconButton} from '@material-ui/core'; import firebase from './firebase'; class LikeMusicList extends React.Component{ state = { list: [] } componentDidMount() { let db = firebase.firestore(); let snapshot = db.collection("likes"); snapshot.get().then(function(querySnapshot) { if (querySnapshot) { querySnapshot.forEach(function(item){ fetch(`https://itunes.apple.com/lookup?id=${item.id}&entity=album`).then(r => r.json()).then(r => { this.setState({ list: r.results[0] }) console.log(r.results[0]); }).catch(e => console.log(e)); }) } else { console.log("No such document!"); } }).catch(function(error) { console.log("Error getting document:", error); }); } render () { return ( <div> {this.state.list.map(item => { <Card key={item.collectionId} className={classes.card}> <CardContent> <Typography variant="subtitle1"> {item.artistName}</Typography> <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography> </CardContent> <img src = {item.collectionViewUrl} alt = {item.collectionName}></img> </Card> })} </div> ); }; } export default LikeMusicList