useStateで値が何も入らないのを直したいです

Question

質問失礼します！

やりたいこととできないこと
現在、setFileArrayでfileArrayに配列を入れようとしているのですが何も入りません
実施した手順とその結果
firebaseのfirestorageにデータを送り、そのurlをfirestoreに保存した
firestoreからuseEffectの中でurlを取得し、_fileArrayに入れて、コンソールで値が入ったのを確認した
その後、setFileArrayでfileArrayに_fileArrayを入れた
結果は以下でした。

[]　Card.js:34
 []　Card.js:32
 [{…}]0: {id: 0.6918969342904946, link: "https://firebasestorage.googleapis.com/v0/b/cv-roo…=media&token=598a2bef-df4f-44e9-b899-9c60ce906d5f"}length: 1__proto__: Array(0)　Card.js:32
 []　Card.js:34

コード

const [fileArray, setFileArray] = useState([]);
  useEffect(() => {
    const db = firebase.firestore();
    const unsubscribe = db
      .collection('file' + props.id.toString())
      .onSnapshot((querySnapshot) => {
        const _fileArray = querySnapshot.docs.map((doc) => {
          return { id: Math.random(), ...doc.data()};
        });
32行目　      console.log(_fileArray)
        setFileArray(_fileArray);
34行目　      console.log(fileArray)
        props.setFileLength(fileArray.length, props.id);
      });
    return () => {
      unsubscribe();
    };
  }, []);

何を・どのように調べたのか

上記を解決するために、以下のキーワードで検索しました。
・useState反映されない
・公式ドキュメント　useState

参考にした記事のURLは以下です。
・https://teratail.com/questions/225053
・https://ja.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

何が原因だと思うか
原因は更新の仕方が間違っているからだと思います
理由は_fileArrayまではうまくできていたからです

試した解決策とその結果
setFileArray(...fileArray)にしたり、ほかの式に...fileArrayをいれてからsetFileArrayに入れたりしてみました。setTimeoutも使ってみました
しかし表示は変わらず、fileArrayには値が入らないままでした
間違ったところがありましたらご教示いただけると幸いです！

Answer 1

間違ったところがありましたらご教示いただけると幸いです！

setFileArrayをした直後にfileArrayを参照すること自体が間違っています。

setFileArrayは非同期に動作しますので、fileArrayが更新されるのは次の描画時となります。

Comments

[Nozomu08]

返信ありがとうございます、useStateは非同期なんですね！
次の描画時にならなくてもfileArrayを参照できる方法がべつであれば教えていただきたいです！
useState内で非同期を待つ処理をすればうまくいくのでしょうか？
useEffect内を以下に変えて試してみましたが変わらずでした、、

useEffect(() => {
const db = firebase.firestore();
const unsubscribe = db
.collection('file' + props.id.toString())
.onSnapshot((querySnapshot) => {
const _fileArray = querySnapshot.docs.map((doc) => {
return { id: Math.random(), ...doc.data()};
});
console.log(_fileArray)　　　　　　　　　　変えた部分
const Wait = async () => {
await new Promise(r => setTimeout(r, 1000));
setFileArray(_fileArray)
};
Wait();
props.setFileLength(fileArray.length, props.id);
console.log(fileArray)
});
return () => {
unsubscribe();
};
}, []);

[maisumakun]

> 次の描画時にならなくてもfileArrayを参照できる方法がべつであれば教えていただきたいです！

そのまま_fileArrayを使う、でいいかと思います。

[Nozomu08]

そのまま使うのは盲点でした！ありがとうございました！