从 API 接收位置数据后加载 React google 地图组件

Question

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

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

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

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

Answer 1

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

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

然后在地图中使用 {marker}

我假设 loc in state 设置为 null...

希望对您有所帮助。

从 API 接收位置数据后加载 React google 地图组件

Load react google map component after receive locations data from API

reactjs

react-redux

react-hooks