render двух yandex map

Question

Не могу понять, почему рендерит две карты. При это, изменения вносятся на нижнюю карту, на верхнюю изменения не применяются.

component MapY:

import React from 'react';
import { YMaps, Map, FullscreenControl, GeoObject } from "react-yandex-maps";

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

const MapY = () => {
 return (
    <YMaps>
        <div>
            <Map defaultState={mapData}>
                <FullscreenControl options={ { float: 'left' } }/>
                <GeoObject
                    geometry={ {
                        type: 'LineString',
                        coordinates: [
                            [55.76, 37.64],
                            [52.51, 13.38],
                        ],
                    } }
                    options={ {
                        geodesic: true,
                        strokeColor: '#F008',
                        strokeWidth: 6,
                    } }
                />
            </Map>

        </div>
    </YMaps>
);
};

export default MapY;

App.js:

import './App.css';
import MapY from "./components/Map/MapY";


function App() {
  return (
     <MapY/>
);
}

export default App;

Выглядит это так:

Answer 1

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

const { YMaps, Map, FullscreenControl, GeoObject } = ReactYandexMaps;

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

const MapY = () => {
 return (
    <YMaps>
        <div>
            <Map defaultState={mapData}>
                <FullscreenControl options={ { float: 'left' } }/>
                <GeoObject
                    geometry={ {
                        type: 'LineString',
                        coordinates: [
                            [55.76, 37.64],
                            [52.51, 13.38],
                        ],
                    } }
                    options={ {
                        geodesic: true,
                        strokeColor: '#F008',
                        strokeWidth: 6,
                    } }
                />
            </Map>
        </div>
    </YMaps>
  );
};

function App() {
  return <MapY />;
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-yandex-maps/dist/production/react-yandex-maps.umd.js"></script>

Answer 2

Скорее всего у вас установлен React Strict Mode который изначально используется в "create-react-app" в новых версиях. Проверьте обернуто ли App в <React.StrictMode> в index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>
);

Strict Mode можно отключить просто удалив тэг <React.StrictMode>

root.render(
   <App />
);

StrictMode дважды рендерит компоненты (в dev, но не в production), чтобы обнаружить любые проблемы с вашим кодом.

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

https://ru.reactjs.org/docs/strict-mode.html#gatsby-focus-wrapper

БЛОГ НА HUSL

render двух yandex map

Ответы (2 шт):