将 useMemo 或 useCallbacks 添加到地图组件会破坏代码并出现错误 "Rendered more hooks than during the previous render "

Question

我想做什么

在地图上放置一个标记并计算标记与地图上的静态位置之间的距离。

问题描述

以前我的 useEffect 导致重新渲染，现在当我尝试缓存函数时出现此错误。

   Unhandled Runtime Error
        Error: Rendered more hooks than during the previous render line 27

第 27 行是我使用 useCallback 的地方。
在地图上放置标记会影响运行并计算距离。
提供给GoogleMap组件的所有选项都在功能组件之外。
为避免重新创建 onMapClick 函数，我正在尝试使用导致此错误的 UseCallback。 useMemo 也有同样的错误。
即使我注释掉 onMapClick 函数并将其从 GoogleMap 属性中删除，重新渲染问题仍然存在。

    import React, { useState, useEffect, useCallback } from 'react';
    import { GoogleMap, useLoadScript } from '@react-google-maps/api';
    
    const libraries = ['places'];
    const mapContainerStyle = {
      width: '100%',
      height: '40vh',
    };
    const center = {
      lat: 25.33800452203996,
      lng: 55.393221974372864,
    };
    const options = {
      zoomControl: true,
    };
    
    const initialMarker = { lat: null, long: null };
    export default function index() {
      const { isLoaded, loadError } = useLoadScript({
        googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
        libraries,
      });
      const [marker, setMarker] = useState(initialMarker);
      if (loadError) return 'Error Loading Maps';
      if (!isLoaded) return 'Loading Maps';
    
      const onMapClick = useCallback((event) => {
        setMarker({
          lat: event.latLng.lat(),
          lng: event.latLng.lng(),
        });
      }, []);
    
      useEffect(() => {
        if (
          google.maps.geometry.spherical.computeDistanceBetween(
            new google.maps.LatLng(center.lat, center.lng),
            new google.maps.LatLng(marker.lat, marker.lng)
          ) > 1000
        ) {
          console.log('out of bounds');
        }
      }, [marker.lat]);
      return (
        <div>
          <GoogleMap
            mapContainerStyle={mapContainerStyle}
            zoom={14}
            options={options}
            center={center}
            onClick={onMapClick}></GoogleMap>
        </div>
      );
    }

参考类似的重新渲染问题

我也试过这个，没用。

Answer 1

你的问题是这样的：

  if (loadError) return 'Error Loading Maps';
  if (!isLoaded) return 'Loading Maps';

  const onMapClick = useCallback((event) => {
    setMarker({
      lat: event.latLng.lat(),
      lng: event.latLng.lng(),
    });
  }, []);

上述 if 条件可能会取消调用某些挂钩，因此出现警告。你不应该使用钩子 conditionally。您需要重构您的代码。

将 useMemo 或 useCallbacks 添加到地图组件会破坏代码并出现错误 "Rendered more hooks than during the previous render "

adding useMemo or useCallbacks to the map component breaks the code with error "Rendered more hooks than during the previous render "

javascript

jsx

reactjs

react-google-maps

我想做什么

问题描述

参考类似的重新渲染问题