firestoreに登録ずみのデータをreactで表示したい。

Question

前提・実現したいこと

firestoreに登録したデータをReactでwebアプリ上に表示したいです。
firestoreの公式ドキュメントを参考に実装しているのですが、コンソールログに表示することはできてもHTML上に表示させることができません。

該当のソースコード

export default function Games(){

  var docRef = db.collection("games").doc("1Cg3grPdahBGuAC2WKnY");
  const game = ["0", "a"];

  docRef.get().then((doc) => {
    if (doc.exists) {
      console.log("Document data:", doc.data().name);
      game.push(doc.data().name);
      console.log(game);
    } else {
      // doc.data() will be undefined in this case
      console.log("No such document!");
    }
  }).catch((error) => {
    console.log("Error getting document:", error);
  });

  //pushしたデータがなくなっている
  console.log(game);

  return(
    <div>
      <ul>
        {game.map((name, i) => <li key={i}>{name}</li>)}
      </ul>
    </div>
  )
}

試したこと

最後のコンソールログでgame配列にpushしたdoc.data().nameの値だけ消えて、元から入っていた0とaは残っていることが確認できました。
game配列がローカルで変更されていて関数をでた後に初期値に戻ったのが原因だと思うのですが、これを解決する方法がわかりません。
配列に値を挿入した後にreturn game;と追記しても内容は変わりませんでした。

Comments

[hoshi-takanori]

React で状態を扱う方法と、Firebase (に限らず) の非同期処理のやり方を理解する必要があるかと…。

[human9]

useStateを使って動かすことはできました。
質問のソースコードの通りにやっても上から処理されるなら問題なく動くと思うのですが、なぜ状態管理を使わないと動かないのでしょうか？

Answer 1

useEffect(() => {処理}, [変数])
と書くと変数の値が変化したタイミングで処理が行われるらしいです。
State変数を変数に、レンダー処理を処理の部分に入れることで、State変数が変化するたびに表示内容が変化するという使い方が多いようですが、変数部を空にすると初めてページがレンダーされた時だけ処理を実行するようにできるそうです。
docRef.get().then以降の処理をuseEffectに入れて無限ループは解決できました。
なぜ無限ループが起きたかは全くわかっていません。

useEffect(() => {
    docRef.get().then((doc) => {
      //非同期処理が成功したときの処理
      if(doc.exists){
        games.push(doc.data().name);
        return games;
      } else {
        console.log("No such document!");
      }
    }).then((games) => {
      //game配列の値がgamesの値に置き換えられる
        setGame(games);  
    }).catch((error) => {
      //非同期処理が失敗したときの処理
      console.log("Error getting document:", error);
    });
  }, [])

Answer 2

useStateを使うことでうまくいきました。
return gameで値を返せなかった理由は、返り値がpromiseであるためその後の処理もthenやcatchで行う必要があるからみたいです。

import React,{useState} from "react";
import "firebase/firestore";
import {db, storage} from "../base";


export default function Games(){
  var docRef = db.collection("games").doc("1Cg3grPdahBGuAC2WKnY");
  const [game, setGame] = useState([]);
  let games = []

  docRef.get().then((doc) => {
    //非同期処理が成功したときの処理
    if (doc.exists) {
      games.push(doc.data().name);
      //promiseと変数gamesを返す(※この後もthenやcatchでしか処理できない)
      return games;
    } else {
      // doc.data() will be undefined in this case
      console.log("No such document!");
    }
  }).then((games) => {
    //useStateでgameの値をgamesに置き換える
      setGame(games);  
  }).catch((error) => {
    //非同期処理が失敗したときの処理
    console.log("Error getting document:", error);
  });

  return(
    <div>
      <ul>
        {game.map((name, index) => <li key={index}>{name}</li>)}
      </ul>
    </div>
  )
}

Comments

[hoshi-takanori]

Firebase のアクセスは useEffect を使わないと無限ループになりますね…。
return games; の前に console.log(games); とかすると確認できるはず。

[human9]

useEffectについて調べてきました。
useEffect(() => {
docRef.get().then((querySnapshot) => {
...
}
},[])
の形で非同期処理全体をuseEffect内に入れることで処理を一回に抑えたのですがあっていますか？