【React】非同期処理時Stateが反映されない

Question

    async function upload(e) {
        e.preventDefault()
        
        previewImages.forEach((async image) => {
            const uploadRef = firebase.storage().ref('images').child(image.id)

            await uploadRef.put(image.blob)
                .then((snapshot) => {
                    snapshot.ref.getDownloadURL()
                        .then((url) => {
                            const n = {
                                id: image.id,
                                path: url,
                            }

                            setImages(((prevState) => [...prevState, n]))
                        })
                })
        })

        console.log(images)

        //setImages([])
    }

このような、画像情報を持った配列をループして、storage上にアップロードし、かつurlを取得してImagesにsetするonClickコードがあります。

しかし、実行してもimagesは空の配列のままで、もう一度実行すると、imagesに画像情報が挿入されています。
この現象は、一番したのsetImagesをコメントアウトしている状態にのみ発生します。(コメントを外すと何度実行してもimagesは空のまま)

新しい配列を作成して、ループが終了した後にその配列ごとsetImagesに挿入してみましたが、それもうまくいきませんでした。

何故初回実行でsetImagesに値を挿入することができないのですか?ご教示願います。

追記:

    useEffect(() => {
        console.log(images)
    }, [images])

とすると、初回実行時でもきちんとimagesに値を挿入できていることが確認できました。
しかし、upload関数内では空の配列として表示されています。

Comments

[maisumakun]

imagesやsetImagesの定義はどこでしょうか？

[yupapapa]

upload関数と同じファイルに、const [images, setImages] = useState([]) という形で定義しています。

Answer 1

forEachはasync-awaitを待ちませんので、console.log(images)はループの中のawaitより先に実行されます。