Question

我正在使用具有组件状态的区域的MapView：

function Component() {
  const [region, setRegion] = useState({/* Initial data */})

  const onRegionChangeComplete = useCallback((newRegion) => {
    setRegion(newRegion)
  })

  return (
    <MapView
      region={region}
      onRegionChangeComplete={onRegionChangeComplete}
    />
  )
}

这按预期工作。但是，在我的应用程序中，我使用了一个反跳钩来从API获取数据，反跳超时为1秒。因此，在用户的地图拖动过程中，挂钩将更新其状态，从而强制重新渲染MapView。有效地导致跳回最后设置的区域。

通过调整以下示例，可以轻松模拟行为：

function Component() {
  const [region, setRegion] = useState({/* Initial data */})
  const [whatever, setWhatever] = useState(0) // ← ADDED

  const onRegionChangeComplete = useCallback((newRegion) => {
    setRegion(newRegion)
  })

  // ADDED ↓
  React.useEffect(() => {
    setTimeout(() => { setWhatever(whatever + 1) }, 1000)
  }, [region])

  return (
    <MapView
      region={region}
      onRegionChangeComplete={onRegionChangeComplete}
    />
  )
}

我有什么办法可以防止这种情况发生，或者这可能是MapView中的错误？

如何防止React Native MapView重新渲染时跳转？

0 个答案: