时间戳

首页 > 解决方案 > 从 API 接收位置数据后加载反应谷歌地图组件

reactjs - 从 API 接收位置数据后加载反应谷歌地图组件

问题描述

我已经react-redux处理了从 API 获取位置数据的操作，并且它运行良好（控制台显示填充了 redux 的 loc 状态）。如果我console.log首先在 Map.js 中定位它会显示undefined，然后它会显示数据。因此，我想我无法在地图上加载标记，因为 Google 地图会尝试立即加载它。所以问题是如何让谷歌地图在获取标记（来自 API）时加载标记或完整组件？

我正在尝试使用钩子和功能组件来加载地图。我尝试使用useEffect，但我不知道该怎么做。'小白'

let Map = ({ loc }) => {
  useEffect(() => {
    if (!loc) etchLoc();
}[]);

return (
 <GoogleMap ...>
    <MarkerCluser>
       {loc.map((item, index) => (
            <Marker ... />
       )}
    </MarkerCluser>
     )
}

标签： reactjsreact-reduxreact-hooks

解决方案

我希望我能很好地理解问题。你可以使用稍微不同的方法，像这样的事情：

let marker = "";
    if (loc !== null) {
        marker = locations.map((m, index) => (<Marker ... />

然后在地图使用{marker}

我假设状态中的 loc 设置为 null ...

希望有帮助。

推荐阅读