onGoogleApiLoaded 状态改变时不渲染

Question

我有一个 <GoogleMapReact> 组件，我使用 onGoogleApiLoaded:

通过点列表在地图上渲染一些圆圈

const tags = [allJobsTag].concat(settings.jobs.filter((job) => !job.deleted));
const [tag, setTag] = useState(allJobsTag);

function renderGeoFences(map, maps) {
    _.map(geoFencesSites, (site) => {
        let circle = new maps.Circle({
            strokeColor: tag.id==='all-jobs'?"orange":'#1aba8b26',
            strokeOpacity: 1,
            strokeWeight: 4,
            fillColor: '#1aba8b1f',
            fillOpacity: 1,
            map,
            center: { lat: Number(site.location.latitude), lng: Number(site.location.longitude) },
            radius: site.fenceSize,
        });
    });
}




let apiIsLoaded = (map, maps) => {
    renderGeoFences(map, maps);
};

return(
    <GoogleMapReact>
        zoom={getMapZoom()}
        center={{ lat: centerLatitude, lng: centerLongitude }}
        options={{
            fullscreenControl: false,
            zoomControlOptions: { position: 3 },
        }}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)}
    >
        {renderAddresses()}
        {renderUsersLocation()}
        {renderHighlightedUserRoute()}
    </GoogleMapReact>
)

然后在 renderGeoFences 中渲染圆圈。

但是这个函数只调用了ones，虽然里面有状态，但是圆圈不会受到状态的影响。就像在这个例子中，当我尝试通过 tag.id （标签是一种状态）改变圆圈的颜色时。当状态发生变化时，如何让这个函数再次渲染？

Answer 1

您可以使用 React useEffect 钩子重新渲染。在依赖数组中，只需提供您的状态 tag，现在只要 tag 更改其状态，useEffect 函数就会运行。

useEffect(() => {
    let apiIsLoaded = (map, maps) => {
    renderGeoFences(map, maps);
};
}, [tag]);

Answer 2

我想您可以维护我们可以用来调用 isApiLoaded 函数的 googleMapObj。如下所述，这在 useEffect 中被调用。

const tags = [allJobsTag].concat(settings.jobs.filter((job) => !job.deleted));
const [tag, setTag] = useState(allJobsTag);
const [googleApiObj, setIsGoogleApiLoadedObj] = useState(null);

useEffect(() => {
  if (googleApiObj) {
    const {
      map,
      maps
    } = googleApiObj;
    // or else call that isApiLoaded function and pass-on these arguments  
    renderGeoFences(map, maps)
  }
}, [googleApiObj, tag])

function renderGeoFences(map, maps) {
  _.map(geoFencesSites, (site) => {
    let circle = new maps.Circle({
      strokeColor: tag.id === 'all-jobs' ? "orange" : '#1aba8b26',
      strokeOpacity: 1,
      strokeWeight: 4,
      fillColor: '#1aba8b1f',
      fillOpacity: 1,
      map,
      center: {
        lat: Number(site.location.latitude),
        lng: Number(site.location.longitude)
      },
      radius: site.fenceSize,
    });
  });
}

return ( <
  GoogleMapReact >
  zoom = {
    getMapZoom()
  }
  center = {
    {
      lat: centerLatitude,
      lng: centerLongitude
    }
  }
  options = {
    {
      fullscreenControl: false,
      zoomControlOptions: {
        position: 3
      },
    }
  }
  yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded = {
    ({
      map,
      maps
    }) => setIsGoogleApiLoaded({
      map,
      maps
    })
  } >
  {
    renderAddresses()
  } {
    renderUsersLocation()
  } {
    renderHighlightedUserRoute()
  } <
  /GoogleMapReact>
)

onGoogleApiLoaded 状态改变时不渲染

onGoogleApiLoaded not rendering when state change

javascript

state

reactjs

google-maps-react