为什么我必须在 fitBounds 使用 @react-google-maps/api 之前执行两次 fitBounds

Question

我有一个基本的 React Maps POC，它在地图上显示用户的 Pin 图，我使用 React Hooks 设置这些用户和负载位置，当我注入新用户时一切正常 Inject用户按钮到状态然后执行fitBounds，地图随着新用户更新并适应新用户的边界。

当我点击 Fetch Users 按钮时，我将状态更新为初始用户集并执行 fitBounds，然后最后一个用户从地图中删除，状态，但边界未更新。只有当我第二次点击 Fetch Users 时，fitBounds 才会起作用。

Answer 1

所有改变状态的 setter 形式都是异步的。这意味着它们实际上运行在您使用它们的方法完成后。

您正在 getMyPlaces() 中设置状态。所以按钮的onClick里面的fitBounds

onClick={() => {
   getMyPlaces();
   fitBounds(mapRef)
}}

运行s 在实际设置状态之前。

您应该添加一个效果，在更改位置后触发 fitBounds，如下所示：

useEffect(() => {
  fitBounds();
}, [places])

Why do I have to do a fitBounds twice before fitBounds works with @react-google-maps/api