react-map-gl center of the map doesn`t change

Question

I'm using node(16.17.0) and react(17.0.1).

And the issue is react-map-gl(7.0.19)

The latitude and longitude change well, but the map can't move to the center to location.

useEffect(()=>{
    setViewState({
        latitude:center?.lat,
        longitude:center?.lng,
        zoom: 18,
    })
},[center]);

<ReactMapGL
    initialViewState={viewState}
    onMove={onMove}
    onViewportChange={(viewport) => setViewState(viewport)}
    mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    mapStyle="mapbox://styles/mapbox/streets-v11"
    width="100%"
    height="100%"
>
    <Source type={"geojson"} data={returnGeoData()} >
        <Layer type={"fill"} paint={{
            'fill-color': '#0080ff', // blue color fill
            'fill-opacity': 0.5
        }} />
        <Layer type={"line"} paint={{
            'line-color': '#0938d0',
            'line-width': 3
        }} />
    </Source>
    {/*{*/}
    {/*    !isEmpty(rotatedPoly?.geometry?.coordinates[0]?.slice(0,4)) &&*/}
    {/*    <Source  type="image" url={testImg} coordinates={rotatedPoly?.geometry?.coordinates[0]?.slice(0,4)}  >*/}
    {/*        <Layer source={"testItem"} type={"raster"} paint={{*/}
    {/*            "raster-fade-duration":0*/}
    {/*        }}/>*/}
    {/*    </Source>*/}
    {/*}*/}
</ReactMapGL>

Is there a reason why the map can't go to center even change a 'setViewState'

Answer 1

For the map view to update dynamically based on your center value, the ReactMapGl component needs to include the viewState properties (latitude, longitude, zoom). You can simply fix it by adding {...viewState} like this:

<ReactMapGL
    {...viewState}
    initialViewState={viewState}
    onMove={onMove}
    onViewportChange={(viewport) => setViewState(viewport)}
    mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    mapStyle="mapbox://styles/mapbox/streets-v11"
    width="100%"
    height="100%"
>

Besides, I suggest using a static value instead of viewState for your initialViewState.