FireStoreデータの読み込みはできるが想定された値がセットされない

前提・実現したいこと

現在、ReactNativeでスマホアプリを開発しています。

CloudFirestoreに保存してある画像パスを取得し、
Storage内の画像を表示させたいと考えています。

説明下手なところもありご不便おかけいたしますが、
有識者の方のご回答いただけると助かります。

発生している問題・エラーメッセージ

対象の画面を開いたところ以下の順でログが出力されており
想定される画像が表示できなくて困っています。

Array [] --1
Array [
  "https://firebasestorage.googleapis.com/v0/b/...",
  "https://firebasestorage.googleapis.com/v0/b/...",
  "https://firebasestorage.googleapis.com/v0/b/...",
  "https://firebasestorage.googleapis.com/v0/b/...",
]

該当のソースコード

export default function Battle({ navigation }: any) {
  let karutas: any[] = [];

/** Get Path */
  async function getKarutasUrl() {
    await getKarutaInfo()
      .then((param) => {
        karutas = param.filter((val) => val);
        console.log(karutas);　//　上記ログの空でないArray取得 -> 値取得OK
      })
      .catch(({ err }: any) => console.log(err));
  }
  getKarutasUrl();
  console.log(karutas); //　上記ログの空Array取得 -> 値取得NG
・
・
・

export async function getKarutaInfo() {
  let result: string[] = [];
  await fireStore
    .collection("image_karutas")
    .get()
    .then((snapShot) => {
      snapShot.forEach((doc) => {
        const karuta = doc.data();
        result.push(karuta.path);
        // console.log(result);
      });
    })
    .catch((error) => {
      console.log("Error:" + error);
    });
  // console.log(result);
  return result;
}

現状

Arrayへの設定をforEachとしてkarutas.push()にしたり、
FireStore内のデータ構造を変更したり、
JSの処理順序を色々変えたりしたのですが上手くいかず。。

補足情報（FW/ツールのバージョンなど）

Node v12.18.3
npm 6.14.6
ReactNative sdk-38.0.2
TypeScript 3.9.5
Expo 3.24.0

行動規範の内容に同意します

回答4件

console.log前のgetKarutasUrlをawaitしていないためconsole.log実行時にはまだkarutasが空なのではないでしょうか？

javascript
1export default function Battle({ navigation }: any) {
2  let karutas: any[] = [];
3
4/** Get Path */
5  async function getKarutasUrl() {
6    await getKarutaInfo()
7      .then((param) => {
8        karutas = param.filter((val) => val);
9        console.log(karutas);　//　上記ログの空でないArray取得 -> 値取得OK
10      })
11      .catch(({ err }: any) => console.log(err));
12  }
13  //getKarutasUrl();
14  await getKarutasUrl(); // getKarutasUrl()の終了を待つ
15  console.log(karutas); //　上記ログの空Array取得 -> 値取得NG
16・
17・
18・

投稿2020/08/30 13:11

nekoniki

総合スコア2409

nakapon9517

2020/08/30 14:31

お疲れ様です。ご回答いただきありがとうございます! ご指摘いただいた通り修正し確認したところ、以下エラーが発生してしまうという状況です。。。 Error: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). if you... Reactの構文ミスでPromiseの処理を正しく行えていないのが原因とは思っているのですが、どこを修正したらいいのか分からずで詰まってしまっています。。。

nekoniki

2020/08/30 23:27

そのエラーはrender内で定義している変数にObject型が入ってきている場合のエラーだと思います。質問文中にはrenderの記載が省略されていたので、いったんお手元のソースでrenderの箇所(おそらくgetKarutasUrlから返ってきた値を使っている箇所です)の書き方を見直すことをお勧めします。

行動規範の内容に同意します

getKarutasUrl()が asyncで定義されているため、呼び出し時の処理が非同期で行われおり、
直後のconsole.log()が先に実行されているように読めました。

後続処理がgetKarutaUrl()の完了を前提としているのなら、
最初からgetKarutaInfo()のPromiseのチェーンとして実装すれば良いかなと思います。

javascript
1export default function Battle({ navigation }: any) {
2  async function getKarutasUrl() {
3    await getKarutaInfo()
4      .then((param) => {
5        karutas = param.filter((val) => val);
6        console.log(karutas);　//　上記ログの空でないArray取得 -> 値取得OK
7        return karutas;
8      })
9      .then((karutas) => {
10        console.log(karutas);
11        // もとのコードで getKarutasUrl() 以降にやりたい処理
12      })
13      .catch(({ err }: any) => console.log(err));
14  }
15  getKarutasUrl();

投稿2020/08/30 13:05

attakei

総合スコア2738

nakapon9517

2020/08/30 14:30

お疲れ様です。ご回答いただきありがとうございます! ご指摘いただいた通り修正し確認したところ、 async function getKarutasUrl()の呼び出しが最初に呼ばれているため、当初の空配列のままとなってしまいます。 export default function Battleを export default async function Battleとし、 getkarutasUrl()にawaitを付ける方法も試してみたのですが、以下エラーが発生してしまうという状況です。。。 Error: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). if you...

行動規範の内容に同意します

以下で解決できました。
async await Promise Reactについての理解不足です・・・

export default function Battle({ navigation }: any) {
  const [karutaDataList, setKarutaDataList] = useState([""]);

  useEffect(() => {
    // 画面初期描画の時のみ処理実行
    getKarutaInfo()
      .then((res: string[]) => {
        console.log(res);
        setKarutaDataList(res);
      })
      .catch(({ err }: any) => console.log(err));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground source={tatami} style={styles.image}>
        <View style={styles.boiceBox}>
          <Text style={styles.text_size}>金色のガッシュベル好きだった</Text>
        </View>
        <View style={styles.box_top}>
          {
            // 空の文字列はFilterで除去
            karutaDataList
              .filter((val) => val)
              .map((val) => {
                return (
                  <TouchableOpacity key={val}>
                    <Image
                      source={{
                        uri: val,
                      }}
                      style={styles.image_karuta}
                    ></Image>
                  </TouchableOpacity>
                );
              })
          }
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
}

投稿2020/09/02 08:15

nakapon9517

総合スコア3

自己解決

以下コードで動作確認できました。
async,await,Promise,React構文の理解が足りませんでした。

export default function Battle({ navigation }: any) {
  const [karutaDataList, setKarutaDataList] = useState([""]);

  useEffect(() => {
    // 画面初期描画の時のみ処理実行
    getKarutaInfo()
      .then((res: string[]) => {
        console.log(res);
        setKarutaDataList(res);
      })
      .catch(({ err }: any) => console.log(err));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground source={tatami} style={styles.image}>
        <View style={styles.boiceBox}>
          <Text style={styles.text_size}>金色のガッシュベル好きだった</Text>
        </View>
        <View style={styles.box_top}>
          {
            // 空の文字列はFilterで除去
            karutaDataList
              .filter((val) => val)
              .map((val) => {
                return (
                  <TouchableOpacity key={val}>
                    <Image
                      source={{
                        uri: val,
                      }}
                      style={styles.image_karuta}
                    ></Image>
                  </TouchableOpacity>
                );
              })
          }
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
}

投稿2020/09/02 07:59

nakapon9517

総合スコア3