【React】非同期処理内でStateに連想配列を即時反映させたい。

Question

実現したいこと

• 非同期処理内でStateに値を即時反映させたい。

前提

現在地情報を非同期で取得してStateに反映したいのですが、即時反映されません。
以下のソースコードのconsole.logで新しい値に変わっているのが望ましいのですが、この時点ではまだStateが更新されないようです。
どのようにすればここのconsole.logの時点で値を反映させることができるでしょうか。
値は連想配列です。

      navigator.geolocation.getCurrentPosition(
        (position) => {
          
          const data: currentPosition = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          // state更新
          setCurrentPosition(data);
          //更新した値をログに出したいが、setCurrentPositionした値が反映されない
          console.log(currentPosition.lat);
          console.log(currentPosition.lng);
          resolve();
        },
...
        }

なぜそうしたいのか

現在地を取得→現在地情報を元にAPIでデータを取得したいためです。
現在地情報をstateで管理すると、APIが走る時に最新の現在地情報が反映されていないことに気がつきました。
そのため即時反映（console.logの位置で反映）されていれば、後続の処理で問題なく現在地情報を使えると思いました。

Comments

[maisumakun]

> どのようにすればここのconsole.logの時点で値を反映させることができるでしょうか。

なぜそれをしなければならないのでしょうか？

[sasa0330]

コメントありがとうございます。
「なぜそうしたいのか」を追加しました。
現在地を取得→現在地情報を元にAPIでデータを取得したいためです。
現在地情報をstateで管理すると、APIが走る時に最新の現在地情報が反映されていないことに気がつきました。
そのため即時反映（console.logの位置で反映）されていれば、後続の処理で問題なく現在地情報を使えると思いました。

Answer 1

そのため即時反映（console.logの位置で反映）されていれば、後続の処理で問題なく現在地情報を使えると思いました。

どうしてもそれをやりたいのであれば、dataをそのまま使ってください。stateのcurrentPositionは次の描画まで更新されません。

Comments

[sasa0330]

>stateのcurrentPositionは次の描画まで更新されません。
ありがとうございます。
stateは使わない方針で再度検討してみます。

Answer 2

ReactのStateは非同期で更新されるため、
setCurrentPosition()実行後すぐにStateの値が更新されるわけではありません。

なのでuseEffectを使ってください。

import { useState, useEffect } from "react";

export default () => {
  const [currentPosition, setCurrentPosition] = useState({ lat: 0, lng: 0 });

  useEffect(() => {
    console.log(currentPosition.lat);
    console.log(currentPosition.lng);
  }, [currentPosition]);

  navigator.geolocation.getCurrentPosition((position) => {
    const data = {
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    };
    setCurrentPosition(data);
  });
  ・・・