Повторный рендеринг ответов Google Maps Elevations API в функциональном компоненте React

Пишу приложение для отслеживания транспортных средств. С помощью Google Maps API я могу прокладывать маршруты и извлекать всю необходимую информацию. Проблема возникла с ответами Elevations API. Из класса DirectionRender я отправляю путь и расстояние в качестве реквизита. Запрос GM Elevations выполняется через elevator.getElevationAlongPath(option,PlotElevation). PlotElevation (высота, статус) - это функция обратного вызова. Однако, как бы я ни пытался получить от него только один ответ (используя useMemo, useEffect, я думаю, что перепробовал все), все равно возникают проблемы с повторным рендерингом ответов. OVER_QUERY_LIMIT или бесконечный рендер. Может ли кто-нибудь помочь с этим? Спасибо

const Elevation = React.memo(props =>{

const [path, setPath] = useState({...props.path})
const [distance, setDistance]=useState({...props.distance})  
const [elevationArray, setElevationArray] = useState(null)
const [stop, setStop] = useState(false)

let pathElev = JSON.parse(JSON.stringify(path))

React.useEffect(() => {
    setPath(props.path)
}, [props.path])
React.useEffect(() => {
    setDistance(props.distance)
}, [props.distance])


let elevator = new window.google.maps.ElevationService;
let numberSamples = parseInt( distance/40)

let options = {
    'path':path,
    'samples':numberSamples 
}

//The problem starts here
const  PlotElevation  = (elevations, status) => {
    if (stop === false){
        console.log('status',status)             
        console.log(JSON.parse(JSON.stringify(elevations)))
        setElevationArray(elevations)  
        //setStop(true)
        console.log(elevations[19].elevation)    
        return         
    }
} 
const Memo = React.useMemo(
    ()=>{
    elevator.getElevationAlongPath(
        options,PlotElevation                
        )
},[elevator.getElevationAlongPath(
    options,PlotElevation                
    )])

// elevator.getElevationAlongPath(
//     {
//       path: path,
//       samples: 100
//     },  elevations =>{      
//       setElevationArray({            
//         // We’ll probably want to massage the data shape later:
//        // elevationArray: elevations
//       })
//     }
//   ) 
return (
    <div>
        {Memo}
        {console.log('path is received ', pathElev)}
        {console.log('number of samples', numberSamples)}    
        {console.log('elevation check ',elevationArray)}
                              
        {/* {elevator.getElevationAlongPath(
        options,PlotElevation)} */}
           
         
    </div>
)

})

экспорт высоты по умолчанию

0 ответов

Другие вопросы по тегам