

firebaseから取得したデータをreact
componentで表示したいのですがundefinedが返され上手く表示されません。ライフサイクルの観点から上手くデータが同期されていない様に思うのですが、どなたかご教示いただく事は出来ないでしょうか。

[code]

    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>
                )
            }
        }
    };
    
[/code]


CC BY-SA 4.0
2020-08-30T07:41:25.160
69987
2022-08-02T00:13:00.237
2022-08-02T00:13:00.237
3060
41696
question
javascript reactjs firebase
firebaseから取得したデータをReact内のjsxで表示できない


取得処理が非同期なので、データ取得してsetStateする前に、componentDidMountが終了して  
Renderされているんじゃないでしょうか。  
Promiseかasync,awaitで取得処理が終わるのを待てば反映されるかと思います。

【追記】  
コメントではソース部分が書きにくい為、回答に編集で書きます。  
仰る通りcomponentWillMountは非推奨になってますので  
hooksを使用した版を下記に載せますので参考に

[code]

    const db = firebase.firestore();
    
    export default () => {
      const [list, setList] = useState([]);
    
      useEffect(() => {
        const fetchData = async () => {
          const ref = db.collection("list");
          const snapShot = await ref.get();
          const list = snapShot.docs.map((doc) => {
            const item = doc.data();
            item.id = doc.id;
            return item;
          });
          setList(list);
        };
        fetchData();
      }, []);
    
      return (
        <div>
          {list.map((item) => (
            <div key={item.id}>{item.id}</div>
          ))}
        </div>
      );
    };
[/code]


CC BY-SA 4.0
2020-08-30T23:25:09.713
70000
2020-09-02T23:58:26.963
2020-09-02T23:58:26.963
20906
20906
69987
answer