0

我目前正在尝试遍历数组并在我的反应应用程序中的谷歌地图上显示多个标记。我首先必须通过地理编码 api 运行位置以获取 lat 和 lng，然后设置一个状态变量来映射以获取要显示在地图上的标记。我目前在我的代码中的某个地方遇到问题，似乎无法找到问题所在。

我知道当我 console.log 我的状态变量时，它似乎多次运行日志，前几个是空数组，最后几个包含我需要的数据。我很新的反应，仍然试图掌握它。

另外我认为我的 .map 函数在设置状态变量之前正在运行，我不确定如何重构来解决这个问题。

这是我的代码 -

import React, { useContext, useEffect, useState } from 'react';
import { GoogleMap, useLoadScript, Marker } from "@react-google-maps/api"
import Settings from "../Settings"
import mapSyles from "./MapStyles"
import { LogContext } from '../divelog/DiveLogProvider';

export const MapRender =(props) => {
    const {diveLogs} = useContext(LogContext)
    const [latLong, setLatLong] = useState([])
    

    
     useEffect(()=>{
    //Taking the logs and running them through API to get lat and lng for each location 
    let latLongs = []
    diveLogs.map(dl =>{
        return fetch(`http://api.positionstack.com/v1/forward?access_key=ff0fcd042ab984146219abc275c71e4b&query=${dl.location}&limit=1
        `)
            .then(res => res.json())
            .then(parsedRes => {

                latLongs.push(parsedRes.data[0])
                setLatLong(latLongs)
              })


    })
 
},[diveLogs])


// this returns several logs, the first of which are empty arrays and the last are correct with the data that I need
    console.log(latLong)

    


    const { isLoaded, loadError } = useLoadScript({
        googleMapsApiKey: Settings.apiKey
    })

    const mapContainerStyle = {
        width: '31rem',
        height: '24rem'
    }

    const center = {
        lat: 0,
        lng: 0
    }

    const options = {
        styles: mapSyles,
        disableDefaultUI: true
    }


    
    if (loadError) console.log("error loading maps")
    if (!isLoaded) return "Loading..."

    return (
        <div>
            <GoogleMap
                mapContainerStyle={mapContainerStyle}
                options={options}
                zoom={1}
                center={center}
            >
                
                {
                    //this is where I map through the state variable
                    latLong.map(l =>(
                     <Marker key={l.lat}
                         position ={{lat: l.latitude, lng: l.longitude}} 
                         />
                    ))
                }
            </GoogleMap>
        </div>
    )
}
4

1 回答 1

0

您需要将您的 setLatLong(myDiveLogs) 移动到 api 调用的成功方法中。Api 调用是异步的，但在 setLatLong 中分配数据是同步的。React 将在 setLatLong 中推送空数据。

您需要等待 api 调用，一旦数据可用，请在其中设置值。

import React, {
  useContext,
  useEffect,
  useState
} from 'react';
import {
  GoogleMap,
  useLoadScript,
  Marker
} from "@react-google-maps/api"
import Settings from "../Settings"
import mapSyles from "./MapStyles"
import {
  LogContext
} from '../divelog/DiveLogProvider';

export const MapRender = (props) => {
  const {
    diveLogs
  } = useContext(LogContext)
  const [latLong, setLatLong] = useState([])



  useEffect(() => {
    //Taking the logs and running them through API to get lat and lng for each location 
    let myDiveLogs = []
    diveLogs.map(dl => {
      return fetch(`http://api.positionstack.com/v1/forward?access_key=MYKEY&query=${dl.location}&limit=1
            `)
        .then(res => res.json())
        .then(parsedRes => {

          myDiveLogs.push(parsedRes.data[0])
          setLatLong(myDiveLogs)
        })


    })

  }, [diveLogs])

  // this returns several logs, the first of which are empty arrays and the last are correct with the data that I need
  console.log(latLong)




  const {
    isLoaded,
    loadError
  } = useLoadScript({
    googleMapsApiKey: Settings.apiKey
  })

  const mapContainerStyle = {
    width: '31rem',
    height: '24rem'
  }

  const center = {
    lat: 0,
    lng: 0
  }

  const options = {
    styles: mapSyles,
    disableDefaultUI: true
  }



  if (loadError) console.log("error loading maps")
  if (!isLoaded) return "Loading..."

  return ( <
    div >
    <
    GoogleMap mapContainerStyle = {
      mapContainerStyle
    }
    options = {
      options
    }
    zoom = {
      1
    }
    center = {
      center
    } >

    {
      //this is where I map through the state variable
      latLong.map(l => ( <
        Marker key = {
          l.lat
        }
        position = {
          {
            lat: l.latitude,
            lng: l.longitude
          }
        }
        />
      ))
    } <
    /GoogleMap> <
    /div>
  )
}

于 2020-09-24T16:40:46.543 回答