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 LikeMusicListI want to do rendering these data with fetching the albums in Itunes. But because of synchronization problem, in return the varialbe 'list' is empty. I think that the code 'snapshot.get().~' is executed before return, but result was reverse of that. How do I solve this problem?
You solve the problem by using state and moving the firestore function to react lifecycle function called componentDidMount:
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