react(useState())

如何解决react(useState())

我想先初始化地图上的位置（使用纬度和经度）

而且效果很好

我可以更改 Zoom + 或 - 如果我将默认参数放在 useState 挂钩上

const [viewport,setViewport] = useState({
    width: "100vw",height: "100vh",latitude: 47.608013,longitude: -122.335167,zoom: 8,});

return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapBox://styles/thecjreynolds/ck117fnjy0ff61cnsclwimyay"
      mapBoxApiAccesstoken={process.env.REACT_APP_MAPBox_ACCESS_TOKEN}
      onViewportChange={setViewport}
      onDblClick={showAddMarkerPopUp}
    >
// ... more code here
    </ReactMapGL>
)

但是当我将 setViewport 放在另一个函数中时（function initMap()）。

onViewportChange={initMap} // 此处更改

控制台没有显示任何错误和警告，

但是我无法更改地图的大小或单击它时移动地图。

const [viewport,setViewport] = useState();
function initMap() {
    setViewport({
      width: "100vw",});
};

return (
    <ReactMapGL
      {...viewport}
      mapStyle="mapBox://styles/thecjreynolds/ck117fnjy0ff61cnsclwimyay"
      mapBoxApiAccesstoken={process.env.REACT_APP_MAPBox_ACCESS_TOKEN}
      onViewportChange={initMap}
      onDblClick={showAddMarkerPopUp}
    >
// ... more code here
    </ReactMapGL>
)

请告诉我为什么。谢谢。

解决方法

看起来您试图从其他地方初始化地图，在这种情况下，最简单的选择是将钩子移到组件树的更高位置并将道具传递给 ReactMapGL。您可以考虑使用回调或 refs 来实现相同的目的，但我很少需要这样做。

如果您只是想将它包装在一个函数中并从您发布的组件中将其传递给 ReactMapGL，请确保您在组件中像这样声明该函数：

export default function Map() {
    const [viewport,setViewport] = useState();
    function initMap() {
        setViewport({
          width: "100vw",height: "100vh",latitude: 47.608013,longitude: -122.335167,zoom: 8,});
    };
    return (
        <ReactMapGL
          {...viewport}
          mapStyle="mapbox://styles/thecjreynolds/ck117fnjy0ff61cnsclwimyay"
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
          onViewportChange={initMap}
          onDblClick={showAddMarkerPopUp}
        >
    // ... more code here
        </ReactMapGL>
    )
}

在 ReactMapGL 的幕后可能还有其他一些我不知道的事情发生。

,

每次视口“改变”时，它都会被再次设置为原始值，因为该函数每次都将视口设置为相同的值，因此视口永远不会真正改变。

为了解决这个问题，您需要使用移动事件并获取新位置和缩放，然后将视口设置为这些新值。