Из-за чего происходит двойной вызов функции?

Question

[lazuren]

Использую пакет react-yandex-maps и при клике на Placemark с помощью instanceRef вызываю setPVZ, все бы хорошо, но при клике функция вызывается дважды. Отчего это происходит и как это исправить?

<Placemark 
   key={point.Code}
   modules={['geoObject.addon.balloon', 'geoObject.addon.hint', 'templateLayoutFactory', 'layout.ImageWithContent']}
   geometry={[point.coordY, point.coordX]}
   properties={{
       iconContent: i + 1,
       hintContent: '<div class="placeMark"><h2><i class="fal fa-shipping-fast"></i> Пункт самовывоза:</h2><div><i class="fal fa-map-marker-check"></i> ' + point.City + ', ' + point.Address + '</div><div><i class="fal fa-clock"></i> ' + point.WorkTime + '</div><div><i class="fal fa-mobile"></i> ' + point.Phone + '</div></div>',
   }}
   options={{
       iconLayout: 'default#imageWithContent',
       iconImageHref: pointSVG,
       iconImageSize: [36, 36],
       iconContentSize: [32, 32],
       iconContentOffset: [2, 5],
       iconImageOffset: [-18, -18],
   }}
   instanceRef={
       placeMark => setPVZ(placeMark, {
           city: point.City,
           address: point.Address,
           telephone: point.Phone,
           time: point.WorkTime,
           code: point.Code
       })
   }
/>

let setPVZ = (placeMark, data) => {
        placeMark.events.add('click', function () {
            console.log(data);
            // setSaveAPIPVZAddress(data);
        });
    };

Answer 1

[0xD34F]

По-видимому, при каждом рендере назначается новый обработчик клика. Потому что назначаете вы его неправильно. Вместо получения экземпляра маркера и вызова events.add, передавайте onClick в Placemark; объект с данными (city, address и т.д.) унесите в properties и получайте его внутри обработчика:

const onPlacemarkClick = e => {
  const placemarkData = e.get('target').properties.get('placemarkData');
  ...
};

<Placemark
  onClick={onPlacemarkClick}
  properties={{
    placemarkData: {
      city: point.City,
      address: point.Address,
      ...
    },
    ...
  }}
  ...
/>

Comments

[lazuren]

Спасибо, все заработало!