反应中的高阶函数（useState（））答案

【问题标题】：high order function in react(useState())反应中的高阶函数（useState（））
【发布时间】：2021-01-06 17:36:09
【问题描述】：

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

它也很有效

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

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",
      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>
)

请告诉我为什么。谢谢。

【问题讨论】：

你的覆盖状态值和初始状态值是一样的！这样你就不会发现 UI 有任何变化
你在哪里打电话initMap()？
“我将 setViewport 放在另一个函数中（函数 initMap()）”我看不出这样做的原因。你创建了一个函数，setViewport 一直设置为相同的状态

标签： reactjs react-hooks react-map-gl

【解决方案1】：

看起来你试图从其他地方初始化地图，在这种情况下，最简单的选择是将你的钩子移到组件树的更高位置并将道具传递给 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 的底层可能发生了一些我不知道的事情。

【讨论】：

我一开始和你做了同样的事情，但还是有错误

【解决方案2】：

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

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

【讨论】：