コンポーネントマウント時にuseEffect内でstate（URLをファイルオブジェクトに変換した値が入る配列型）を更新したい

Question

質問失礼致します。

困っていること
previousFilesで受け取ったURLをファイルをコンポーネントマウント時にファイルオブジェクトに変換して、stateを更新し、list表示させたいのですが、
state, oldFilesの更新がうまく行きません。添付した画像は,useEffect内でoldFilesをconsole.logしたものです。空配列かと思いきや、値はちゃんと入っているみたいなんですが、参照できないです。

いろいろと原因を探ってみましたが、まったく理解できないのでどなかヒントいただけると幸いです。

const FileUpload = React.memo((
  {
    name,
    previousFiles, //ファイルのURLを要素にもつ配列
  }
) => {
  const [oldFiles, setOldFiles] = useState([]);
  const oldFileCount = previousFiles && previousFiles.length > 0 ? previousFiles.length : 0;

  useEffect(() => {
    //URLからFileオブジェクトに変換
    if (previousFiles && previousFiles.length > 0) {
      let filesArray = [];
      previousFiles.forEach((file, index) => {
        fetch(file)
          .then(response => response.blob())
          .then(blob => {
            const str = file.split("/");
            const fileName = str[str.length - 1];
            const fileObj = new File([blob], fileName);
            fileObj.preview = URL.createObjectURL(fileObj);
            fileObj.path = fileName;
            filesArray[index] = fileObj
          })
      })
      setOldFiles(filesArray); //配列に格納したファイルオブジェクトをstateに
    }

    return () => {
      oldFiles.forEach(file => {
        URL.revokeObjectURL(file.preview)
      })
    }
  }, [previousFiles])

  useEffect(() => {
    console.log(oldFile)　//上記のuseEffect内でstateを更新しても空配列が出力される　ただ値は入っている
    }
  }, [oldFiles])

    return ( 
     //ファイルをリスト表示する
  )
}

useEffect内のconsole.logでoldFilesを出力した結果

Answer 1

fetch() というのは非同期で実行されます。つまり結果を待たずに次の処理に移行します。この場合だと forEach() 内の fetch() は完了を待たずに次の fetch() に移り、最終的に setOldFiles(filesArray) にたどり着きます。この次点で fetch() が完了していなければ filesArray は [] であり、上記のような結果になります。

では解決するか。解決方法は二つあります。一つは setOldFiles(filesArray) を then() の中に入れてしまう方法です。

...
        fetch(file)
          .then(response => response.blob())
          .then(blob => {
            const str = file.split("/");
            const fileName = str[str.length - 1];
            const fileObj = new File([blob], fileName);
            fileObj.preview = URL.createObjectURL(fileObj);
            fileObj.path = fileName;
            filesArray[index] = fileObj;
            setOldFiles(filesArray);
          })
...

これでもまあ動きますが、fetch() のたびに setOldFiles(filesArray) をするので効率が悪いです。

二つ目の方法は Promise.all() を使う方法です。これならば配列に対して一気に fetch() を実行でき、全ての処理が終わったらその結果を配列として集めることができます。そして setOldFiles(filesArray) をすればよいわけです。

Comments

[kinoko8800]

丁寧にご回答ありがとうございます！
処理の完了を待たずに、（thenの外側で）stateを更新をしていたから空配列になっていたんですね。
勝手に非同期処理の扱いを理解しているつもりでしたが甘かったです、、

アドバイス通り、実装して期待動作を確認できました！

useEffect(() => {
if (previousFiles && previousFiles.length > 0) {
let filesArray = [];
Promise.all(previousFiles.map(url => fetch(url)
.then((response) => response.blob())
.then(blob => {
const str = url.split("/");
const fileName = str[str.length - 1];
const fileObj = new File([blob], fileName);
fileObj.preview = URL.createObjectURL(fileObj);
filesArray.push(fileObj)
})
)).then(() => {
setOldFiles(filesArray)
})
}

return () => {
oldFiles.forEach(file => {
URL.revokeObjectURL(file.preview)
})
}
}, [previousFiles])