firebaseから取得したデータをreact componentで表示したいのですがundefinedが返され上手く表示されません。ライフサイクルの観点から上手くデータが同期されていない様に思うのですが、どなたかご教示いただく事は出来ないでしょうか。
class Grammer extends React.Component {
state =
{
N1:[],
N2:[],
N3:[]
};
componentDidMount(){
const fetchData = () =>{
firebase.database().ref("N3")
.on(("value"),(snapshot)=>{
snapshot.forEach((childSnapshot)=>{
this.setState(()=>{
N3: this.state.N3.push({
id: childSnapshot.key,
...childSnapshot.val()
})
});
});
console.log(this.state.N3[0])
});
};
fetchData();
};
render(){
if(!this.state.N3[0]){
return <div>Loading</div>
}else if(this.state.N3[0]){
return(
<div>
<N3Grammer N3={this.state.N3}/>
</div>
)
}
}
};