0

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>
            )
        }
    }
};

1 件の回答 1

1

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

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

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>
  );
};

10
  • ご回答頂きありがとうございます。asyncとawaitを利用してsetStateを最初に実行させようとしたのですが、asyncとawaitをどの部分に加えたら良いか分からない状態です。いくつか試してみましたが上手くいかず、最終的な目標であるreutrn内コンポーネントへのstate表示のために、どちらにasyncとawaitを追加したら良いかご教示頂けないでしょうか
    – Marcos1031
    Commented 2020年9月1日 7:20
  • すみません、reactのライフサイクルで、componentDidMountの前に初回のrenderが呼ばれるからですね… componentWillMountで行うとrenderの前に処理できそうです。
    – kisetu
    Commented 2020年9月2日 0:55
  • ご回答頂きありがとうございます。componentWillMountは現在推奨されていないとのこ事で、UNSAFE_componentWillMountを利用してみたのですが、これでもrenderが先に実行されてしまう様です。また、constructor内で初期値を与える方法でも試してみたのですが同様にrenderが与えられる様です。両方を試したコードも上記で追記しましたので、間違っている部分をご指摘いただく事は出来ないでしょうか
    – Marcos1031
    Commented 2020年9月2日 6:47
  • 回答に追記しました。
    – kisetu
    Commented 2020年9月2日 23:58
  • ありがとうございます。hookは経験がなかったので、頂いたものを参考に変更してみましたが上手くいかない様です。こちらはhookで実施しないと難しいものでしょうか。追記する形で編集後のコードを記載します
    – Marcos1031
    Commented 2020年9月4日 5:17

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。