状态更改时 onGoogleApiLoaded 不呈现答案

【问题标题】：onGoogleApiLoaded not rendering when state change状态更改时 onGoogleApiLoaded 不呈现
【发布时间】：2021-08-05 13:45:56
【问题描述】：

我有一个<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中渲染圆圈。

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

【问题讨论】：

你能发布整个组件吗？请格式化。
@Elias 感谢您的反馈。我添加了“renderGeoFences”功能。
我在建议的编辑中为您格式化了代码:)。这样做之后，有几件事让我感到好奇。 1. apiIsLoaded 似乎是某种检查，但它没有返回任何内容，并且它始终是未定义的。 2、apiIsLoaded可以去掉，直接调用renderGeoFences。
我从未见过你设置任何状态。这就是我要求整个组件的原因。
@Elias 我添加了状态。渲染其形状（、）必须通过 onGoogleApiLoaded 调用

标签： javascript reactjs state google-maps-react

【解决方案1】：

我想你可以维护和googleMapObj，我们可以用它来调用isApiLoaded 函数。如下所述，这在 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>
)

【讨论】：

我试图编辑你的答案setIsGoogleApiLoaded -> setIsGoogleApiLoadedObj 但它不会让我

【解决方案2】：

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

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

【讨论】：

看起来很有希望，但如果 apiIsLoaded 调用处于 useEffect 中，onGoogleApiLoaded 将无法识别它。
我在使用 useEffect 之前已经尝试过这样的：useEffect.... [map,maps] 现在我也完全尝试了您的解决方案，但正如我所说，apiIsLoaded 未被识别:(
如果这就是问题所在，我们还可以将 GoogleApiLoaded 逻辑移至 useEffect。让我想想。
你可以试试这个useEffect(() => { function apiIsLoaded (map, maps) { renderGeoFences(map, maps); }; onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps)} }, [tag]);
哦！我不知道 onGoogleApiLoaded 是的一个属性。现在这成了有趣的问题。