returnするものが無い関数の終了を待ってから、次の処理を実行したい。

Question

Reactを使用しています。

前提・実現したいこと

const [img, setImg] = useState("")
const compressionImage = () => {
  CompImg.set(
    hoge,
    fuga,
    (uri) => {
      const imgURL = uploadStorage(uri)
      setImg(imgURL)
    }
  )  
}

const updateData = async () => {
  await compressionImage();
  const newData = {
    img: img,
    name: "hoge"
  }
  console.log(newData)
}

上記のコード場合において、newDataオブジェクトのimgプロパティの値を、compressionImageでsetStateした値を代入したいです。

最初の関数compressionImageではreturnするものが無いため、awaitが意味をなしていない状況です。
また、compressionImageのCompImgは、画像を圧縮するライブラリです。

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

最初の関数compressionImageの実行終了を待たないので、newDataのimgは""になります。

試したこと

「javascript return 無し async await」とか、今回とは関係ないですが初心者がよく壁にぶつかりそうな「javascript for 終了後」とかでググったのですが、解決策になりそうなコードを見つけられませんでした。

Answer 1

コードを根本から変える可能性があるため、この質問はしめます。

Answer 2

imgの変化をuseEffectで監視する、という流れではだめなのでしょうか。

const updateData = () => {
  compressionImage();
}

useEffect(() => {
  if(!img) return;
  const newData = {
    img: img,
    name: "hoge"
  }
  console.log(newData)
}, [img]);

Comments

[maisumakun]

stateは、値が変わるごとに別な変数となりますが、クロージャを作ると「その時点の値」をキャプチャしてしまうので、stateの変化に追随できなくなります。

（refを使って回避する方法はありえます）

[erajera]

回答ありがとうございます。それならできそうですね。ただ、できればuseEffectに切り出さずupdateDate関数にまとめて簡潔にしておきたいです。ライブラリの引数の関数内でsetStateしているために簡潔に書くのが困難になるのでしょうか。それであれば、ライブラリの選定も検討します。

個人的な話で恐縮ですが、async/awaitから非同期処理に入った身としては、Promise関連のメソッドはよく分かっておらず、分かっていないゆえに「Promise関連のメソッドや書き方でもしかしたら解決できるのかな」と考え、回答を通じて学習しようと思っていました。

[maisumakun]

> ただ、できればuseEffectに切り出さずupdateDate関数にまとめて簡潔にしておきたいです。

「値がstateとして与えられる」という状況下では、普通にクロージャを作ってしまうとstateの変化に追随できないので簡潔になりません（関数自体をrefの値にするなどの複雑な仕掛けが必要となります）。

[maisumakun]

> 個人的な話で恐縮ですが（後略）

今回の場合は「非同期処理」と「React特有の処理」が絡んだ問題、といったところです。

[erajera]

最初のコメントの意味が理解できました。imgの値をstateで管理せず取得するよう試みます。