L
L
lazuren2020-02-24 13:02:41
Yandex maps
lazuren, 2020-02-24 13:02:41

What is causing the double function call?

I use the react-yandex-maps package and when I click on Placemark using instanceRef I call setPVZ, everything would be fine, but when I click, the function is called twice. Why is this happening and how to fix it?

<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 the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2020-02-24
@lazuren

Apparently a new click handler is assigned on every render. Because you are assigning it incorrectly. Instead of getting a marker instance and calling events.add, pass onClick to the Placemark; take the object with data (city, address, etc.) into properties and get it inside the handler:

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

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question