Yandex map api React как избежать дублей карты?

Question

[jakamenchik]

сделать компонент в котором можно указать адрес на картах но сталкиваюсь с проблемой что не знаю как правильно вызывать функцию Init что бы компонент карт не создавался несколько раз я пытался совершать вызов в useEffect но это не помогало

React, { useState, useEffect } from "react"; import style from "./UserAdress.module.scss";

export const UserAdress = (props) => {
  const [suggest, setSuggest] = useState([]);
  const [adressVariant, setAdressVariant] = useState("");
  const [currentCoordinates, setCurrentCoordinates] = useState([]);
  const HandleSuggest = (e) => {
    ymaps.suggest(e.target.value).then(function (items) {
      setSuggest(items);
    });
  };

  const SetAdress = (e) => {
    setAdressVariant(e.target.textContent);
  };

  const searchAdress = () => {
    ymaps.ready(Init);
    console.log(currentCoordinates);
  };

  const Init = () => {
    let map = new ymaps.Map("map", {
      center: currentCoordinates,
      zoom: 12,
    });
    var myGeocoder = ymaps.geocode(`${adressVariant}`);
    myGeocoder.then(
      function (res) {
        map.geoObjects.add(res.geoObjects);
        setCurrentCoordinates(res.geoObjects.get(0).geometry._coordinates);
      },
      function (err) {}
    );
  };

  useEffect(() => {}, [currentCoordinates]);

  return (
    <div className={style.map}>
      <div className={style.map__inputMenu}>
        <input onChange={(e) => HandleSuggest(e)} />
        <ul>
          {suggest.map((item) => (
            <li onClick={(e) => SetAdress(e)}>{item.value}</li>
          ))}
        </ul>
        <button className={style.map__button} onClick={searchAdress}>
          Проверить
        </button>
      </div>
      <div id="map" style={{ height: "300px", width: "300px" }}></div>
    </div>
  );
};

Answer 1

[iBird Rose]

ты при каждом ините создаешь новый map. выведи let map наружу, а в ините либо обнуляй и заново присваивай. либо не инить снова если в map что-то есть, а работай с готовым map

Comments

[jakamenchik]

можешь подсказать как обнулить или присвоить я слабо я пока слабо понимаю что да как с их апи не работал до этого

[iBird Rose]

jakamenchik, let map вынеси из функции Init. просто пустое определение сделай. к примеру let map = null; а внутри функции просто map = new ymaps.Map("map", ....