NextJS-React Google Maps组件无限循环重渲染问题求助

数据老陈

2026-8-25

问题排查与修复方案

核心原因：无限循环的直接诱因

你代码里的第二个useEffect没有设置依赖数组：

useEffect(() => {
  calculateRoute();
});

这个useEffect会在每次组件重渲染时都触发，而calculateRoute内部调用setDirectionsResponse更新状态，状态更新又会触发组件重渲染，最终形成「渲染→触发useEffect→更新状态→再渲染」的无限循环。

修复步骤

移除无依赖的useEffect
直接删掉这个没有依赖数组的useEffect，它是循环的根源。
完善第一个useEffect的依赖数组
当前第一个useEffect只依赖router.asPath，但calculateRoute还用到了props.from和props.to，这两个参数变化时也应该重新计算路线，所以需要把它们加入依赖数组：
```
useEffect(() => {
  console.log("useEffect fired!", { asPath: router.asPath });
  calculateRoute();
}, [router.asPath, props.from, props.to]);
```
优化GoogleMap的center属性（可选但重要）
当前center直接传directionsResponse是错误的，center需要接收google.maps.LatLng或{lat: number, lng: number}格式的坐标。可以从路线结果中提取起点或中点：
```
<GoogleMap
  center={directionsResponse?.routes[0]?.legs[0]?.start_location || { lat: 0, lng: 0 }}
  // ...其他属性
>
```

添加加载状态或错误处理（可选）
为calculateRoute添加错误捕获，避免因路线请求失败导致的异常：

async function calculateRoute() {
  try {
    const directionsService = new google.maps.DirectionsService();
    const results = await directionsService.route({
      origin: props.from,
      destination: props.to,
      travelMode: google.maps.TravelMode.DRIVING,
    });
    setDirectionsResponse(results);
  } catch (error) {
    console.error("路线计算失败：", error);
    // 可选：设置错误状态提示用户
  }
}