Question

我正在使用显示带有反应的Google地图的应用程序Google Maps已安装了多个图钉，并且通过滚动来更改状态，并且活动航班会根据状态进行更改。

当时，Google地图的中心设置为活动，但是状态改变时会重新渲染Google地图。我不知道如何防止渲染。

Google Maps has NPM library。它使用react-google-maps并使用钩子实现。我试图使用useEffect（）返回false，但是我没有听到它的原样。请告诉我

MapComponent（HOC）

import React from "react";
import { withGoogleMap, GoogleMap, withScriptjs, Marker, InfoWindow } from "react-google-maps";
import { compose, withProps, withHandlers, withStateHandlers } from "recompose";

const MapWithPlaces = compose(
  withProps({
    googleMapURL:
      `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_PLACE_API_KEY}&libraries=geometry,drawing,places`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: "400px", width: "100%" }} />,
    mapElement: <div style={{ height: "100%" }} />
  }),
  withStateHandlers(
    props => ({
      infoWindows: props.places.map(p => {
        return { isOpen: false };
      }),
      defaultCenter: { 'lat': props.lat, 'lng': props.lng }
    }),
    {
      onToggleOpen: ({ infoWindows }) => selectedIndex => ({
        infoWindows: infoWindows.map((iw, i) => {
          iw.isOpen = selectedIndex === i;
          return iw;
        })
      })
    }
  ),
  withHandlers(() => {
    const refs = {
      map: undefined,
    }
    console.log(refs);

    return {
      onMapMounted: () => ref => {
        refs.map = ref
      },
      onZoomChanged: ({ onZoomChange }) => (props) => {
        const center = { 'lat': parseFloat(props.lat, 10), 'lng': parseFloat(props.lng, 10) }
        refs.map.pantTo(center)
      }
    }
  }),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap defaultZoom={props.zoom} defaultCenter={props.center} key={props.key} ref={map}>
    {props.places &&
      props.places.map((place, i) => {
        let lat = parseFloat(place.lat, 10);
        let lng = parseFloat(place.lng, 10);
        return (
          <Marker
            id={place.id}
            key={place.key}
            position={{ lat: lat, lng: lng }}
            title={place.name}
            onClick={props.onToggleOpen.bind(this, i)}
            opacity={place.key === props.step ? 1 : 0.5}
            label={place.day === props.currentDay ? place.dayIndex.toString() : ''}
          >
            {props.infoWindows[i].isOpen && (
              <InfoWindow onCloseClick={props.onToggleOpen.bind(i)}>
                <div>{place.name}</div>
              </InfoWindow>
            )}
          </Marker>
        );
      })}
  </GoogleMap>
));

export default MapWithPlaces;

MapComponent（挂钩）

import React, { useState, useEffect, useRef } from "react";
import { withGoogleMap, withScriptjs, GoogleMap, Marker, InfoWindow } from "react-google-maps";
// import mapStyles from "./mapStyles";

const MapCreate = React.memo((props) => {
  // const [selectedPark, setSelectedPark] = useState(null);
  const mapRef = useRef()
  useEffect(() => {
    console.log("props updates")
    console.log(props);
    const mapCenter = {
      lat: parseFloat(props.places[props.step].lat, 10),
      lng: parseFloat(props.places[props.step].lng, 10)
    }

    return false
    // refMap.current.panTo(mapCenter) //move the map to new location
  }, [props]);

  return (
    <GoogleMap defaultZoom={14} center={{ lat: props.center.lat, lng: props.center.lng }} ref={mapRef}>
      {props.places && props.places.map((place, i) => {
        let lat = parseFloat(place.lat, 10);
        let lng = parseFloat(place.lng, 10);
        return (
          <Marker
            id={place.id}
            key={place.key}
            position={{ lat: lat, lng: lng }}
            title={place.name}
            opacity={place.key === props.step ? 1 : 0.5}
            label={place.day === props.currentDay ? place.dayIndex.toString() : ''}
          >
          </Marker>
        )
      })}
    </GoogleMap>
  )
})

const MapWrapped = withScriptjs(withGoogleMap(MapCreate));

export default function Map(props) {
  const mapRef = useRef(null)
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <MapWrapped
        googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${process.env.REACT_APP_GOOGLE_PLACE_API_KEY}`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: "400px", width: "100%" }} />}
        mapElement={<div style={{ height: `100%` }} />}
        {...props}
      />
    </div>
  );
}

Answer 1

尝试#shouldcomponentupdate

shouldComponentUpdate(nextProps, nextState)

使用shouldComponentUpdate（）来让React知道组件的输出是否不受当前状态或道具变更的影响。默认值行为是在每一个状态变化时以及在广大大多数情况下，您应该依靠默认行为。

应该在呈现新道具或新道具之前调用
shouldComponentUpdate（）状态正在接收。默认为true。此方法未调用初始渲染或使用forceUpdate（）时

即使状态已在react-google-maps中更改，也不想重新渲染

1 个答案: