сделать компонент в котором можно указать адрес на картах но сталкиваюсь с проблемой что не знаю как правильно вызывать функцию 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>
);
};
