polyak-y
@polyak-y
Js, React.js,Vue.js,css

Как удалить лишние координаты в react-yandex-map?

Есть компонент React-Yandex-Map. Он принимает адреса, переводит их в координаты и выводит на карте. Проблема в том, что при добавлении нового адреса, он добавляет новую координату, но при этом еще две старых. Как это можно избежать? Заранее спасибо!
import React, { useState, useEffect } from 'react'
import { YMaps, Map, Placemark, Clusterer } from 'react-yandex-maps';

function App() {
    const [address, setAddress] =  useState(['Тверская область, г. Осташков, ул. Константина Заслонова, д.3', 'Тверская область, г. Осташков, ул. Константина Заслонова, д.7' ]);
    const [center, setCenter] = useState([57.142203, 33.125205]);
    const [state, setState] = useState([])
    const [pops, setPops] = useState(null);

    let geocode = (ymaps) => {
      address.forEach(item => {
         ymaps.geocode(item).then(result => {
          setState(prevState => [...prevState, result.geoObjects.get(0).geometry.getCoordinates()])
        })
      })
    }

    console.log(state)
    console.log(address)

    useEffect(() => {
      if(pops) {
        address.forEach(item => {
          pops.geocode(item).then(result => {
           setState(prevState => [...prevState, result.geoObjects.get(0).geometry.getCoordinates()])
         })
       })
      }
    }, [address])

    return (
        <div>
        <button
          onClick={() => {
            setAddress(prevState => [...prevState, 'Тверская область, г. Осташков, ул. Рудинская, д.7'])
          }}
        >Click</button>
        <YMaps
            query={{
                load: 'package.full',
                lang: 'ru_RU',
                apikey: '41694293-66c0-4133-89c1-0a6928c2497e',
            }}
        >
            <Map
              state={{
                  center: center,
                  zoom: 11,
                  controls: []
              }}
              style={{ height: '580px', width: '100%' }}
              modules={["geolocation", "geocode"]}
              onLoad={ymaps => {
                geocode(ymaps)
                setPops(ymaps)
              }}
              
            > 
               {
                 state.map(elem => {
                   return (
                    <Placemark key={Math.random()} geometry={elem} />
                   )
                 })
               }
            </Map>
        </YMaps>
        </div>
    )
}

export default App
  • Вопрос задан
  • 14 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы