Повторный рендеринг ответов 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>
)
})
экспорт высоты по умолчанию