[React] 現在位置を取得してその現在地の位置情報の地図を表示させたい

Question

前提

React
functionコンポーネント(classコンポーネントはNG)
useState
useEffect ?

以下の方法で書いても地図が表示されなくなります。
どこが間違っているのかよくわかりません。

// 省略

const ShopSearchScreen = () => {
    const [viewport, setViewport] = useState({
        width: '100%',
        height: '300px',
        latitude: null,
        longitude: null,
        zoom: 14
    });

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(
            pos => setViewport({ 
                latitude: pos.coords.latitude,
                longitude: pos.coords.longitude
            }),
            err => console.log(err)
        );
    }, []);

    // 省略

    return(<>
        <ReactMapGL
            {...viewport}
            onViewportChange={nextViewport => setViewport(nextViewport)}
            mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
            mapStyle="mapbox://styles/mapbox/light-v9"
        >
            <Marker latitude={ 35.650184 } longitude={ 139.701269 }>
                <a
                    href={`http://maps.google.com/maps?q=35.650184,139.701269`}
                    rel="noopener noreferrer"
                    target="_blank"
                >
                    <img src={LocateIcon} alt="locate" />
                </a>
            </Marker>
        </ReactMapGL>
        {/* 省略 */}
    </>);
    );
}

※ちなみに直接数字で、位置情報をuseStateに入れたらうまく表示される

Answer 1

※ちなみに直接数字で、位置情報をuseStateに入れたらうまく表示される

ということはuseEffect内の位置情報取得が失敗しているのではないでしょうか？
pos.coordsの値が正しく取れているか、または単純にerrに入ってきていないか等はどうなっていますか？
また、

pos => setViewport({ 
  latitude: pos.coords.latitude,
  longitude: pos.coords.longitude
}),

これだとviewportのwidthやheightが無くなりそうなので、下記のようにしたらどうでしょう？

// 既存のviewportと新しい緯度経度でObject.assignする
pos => setViewport(Object.assign(viewport, { 
  latitude: pos.coords.latitude,
  longitude: pos.coords.longitude
})),

Comments

[DaisukeMori]

うまくいっていないのではなくてステートが書き換わってたのですね。
useStateで定義した項目をuseEffectで設定してあげたらうまく地図が表示できました。

const [viewport, setViewport] = useState({
width: '',
height: '',
latitude: null,
longitude: null,
zoom: null
});

useEffect(() => {
navigator.geolocation.getCurrentPosition(
pos => setViewport({
width: '100%',
height: '300px',
latitude: pos.coords.latitude,
longitude: pos.coords.longitude,
zoom: 14
}),
err => console.log(err)
);
}, []);