gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 114 forks source link

Yandex maps are rendered twice React18 StrictMode #333

Open Kaptoiiika opened 2 years ago

Kaptoiiika commented 2 years ago

React 18 index.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Map, YMaps } from 'react-yandex-maps'

const maState = {
  center: [55.751574, 37.573856],
  zoom: 5,
}

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
    <YMaps>
      <Map defaultState={maState}></Map>
    </YMaps>
  </React.StrictMode>
)

Preview image

If i comment React.StrictMode

//<React.StrictMode>
    <YMaps>
      <Map defaultState={maState}></Map>
    </YMaps>
//</React.StrictMode>

i will get a normal work image

StrongerMyself commented 2 years ago

Такая же проблема

StrongerMyself commented 2 years ago

Также в моем случае интерактивным остается именно вторая карта, на первой не ставятся точки, только меняется масштаб и зум

StrongerMyself commented 2 years ago

Пока грязным хаком спрятал первый

ymaps[class$="map"]:first-child:not(:last-child) {
    display: none;
}
proweb commented 2 years ago

+1

kaptn3 commented 2 years ago

+1

bartwork commented 2 years ago

https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode

Loori-R commented 2 years ago

+1