Placemark edit coors

[diazdressk]

Привет всем! Помогите, пожалуйста! У меня с сервера приходят 500 точек(в виде массива объектов), я их мапю и вывожу на карту:

const map = useRef(null);
const [mapApi, setMapApi] = useState(null);
const [lat, setLat] = useState(0);
const [lng, setLng] = useState(0);

<YMaps query={{ load: "package.full", apikey }}>
         <Map
            onClick={onClickMap}
            instanceRef={map}
            onLoad={(ymaps) => setMapApi(ymaps)}
            width="100%"
            height="70vh"
            defaultState={{
              center: [22.88, 71.28],
              zoom: 8,
            }}
          >
{addresses && addresses.map((adr) => (
                <Placemark
                  geometry={[adr.lat, adr.lng]}
                  key={adr.id}
                  options={{
                    preset: "islands#circleIcon",
                    iconColor: "green",
                    draggable: "true",
                  }}
                />
              ))}
     </Map>
 </YMaps>

они у меня отображаются на карте и мне нужно брать один любой из них и двигать по карте, а его координаты должны устанавливаться в стейты lat, lng, для дальнейшего патча....типа, onChange....как я понял, на Placemark не будет работать onChange, нужно через реф....поэтому делаю так:

{addresses &&
              addresses.map((adr) => (
                <Placemark
                  instanceRef={ref => {
                       а дальше тупик....пробую брать координаты, не берёт
                   }}
                  geometry={[adr.lat, adr.lng]}
                  key={adr.id}
                  options={{
                    preset: "islands#circleIcon",
                    iconColor: "green",
                    draggable: "true",
                  }}
                />
              ))}

ВЫРУЧАЙТЕ!!!

[mmarkelov]

@diazdressk у меток нет метода onChange. Список методов можно посмотреть здесь

import "./styles.css";
import { YMaps, Map, Placemark } from "react-yandex-maps";

export default function App() {
  return (
    <YMaps>
      <Map
        defaultState={{
          center: [55.751574, 37.573856],
          zoom: 5
        }}
      >
        <Placemark
          onClick={(e) => console.log(e.originalEvent)}
          geometry={[55.684758, 37.738521]}
        />
      </Map>
    </YMaps>
  );
}

и выводить 500 меток на карту не лучшая идея в плане производительности. Лучше использовать https://react-yandex-maps.vercel.app/clusterization/Clusterer либо https://react-yandex-maps.vercel.app/clusterization/ObjectManager

[diazdressk]

Буду пробовать. Спасибо большое!!!