Динамическое использование geocode()

[Wimmind]

const YandexMap = (props) => {
  const [center, setCenter] = useState([56.8498, 53.2045]);
  let ymapsObject;

  const getCoords = (ymaps) => {
    console.log(ymaps);
    ymapsObject = ymaps;
  };

  useEffect(() => {
    console.log(ymapsObject);
    if (ymapsObject) {
      ymapsObject.geocode(`Екатеринбург, ${props.address}`).then((result) => {
        const newCoords = result.geoObjects.get(0).geometry.getCoordinates();
        setCenter(newCoords);
      });
    }
  }, [props]);

  const [zoom, setZoom] = React.useState(17);
  const mapState = React.useMemo(() => ({ center, zoom }), [center, zoom]);

  return (
    <>
      <YMaps query={{ apikey }}>
        <Map
          onLoad={(ymaps) => getCoords(ymaps)}
          modules={["geocode"]}
          width="100%"
          height="500px"
          state={mapState}
        >
          <Placemark geometry={center} />
        </Map>
      </YMaps>
    </>
  );
};

export default YandexMap;

Как я могу динамически использовать geocode() ? В зависимости от пропсов? То есть там приходят разные адреса, а мне для того чтоб сделать geocode() нужно знать объект ymaps, но когда я записываю его в переменную ymapsObject, то в useEffect он undefiend

[mmarkelov]

@Wimmind мне кажется самый оптимальный вариант использовать withYMaps

[Wimmind]

спасибо!)

[Wimmind]

@mmarkelov а можете подсказать как этот момент типизировать пожалуйста?

type YandexMapProps = {
  address: string;
};

type YmapsProps = {
  ymaps: any;
};

const YandexMap: React.FC<YandexMapProps> = ({ address }) => {
  const PositionedMap: React.FC<YmapsProps> = memo(({ ymaps }) => {
    ...any code...
  });

  const ConnectedMap = useMemo(() => {
    return withYMaps(PositionedMap, true, [["geolocation", "geocode"]]);
  }, [PositionedMap]);

  return (
    <>
      <YMaps query={{ apikey }}>
        <ConnectedMap />
      </YMaps>
    </>
  );
};

Такие ошибки пишет:

[Wimmind]

разобрался, передавать туда нужно просто массив модулей