Yandex Maps рисует карту дважды

Question

Я делаю сайт, на котором отображается карта (сам сайт на React). Компонент выглядит следующим образом:

import { YMaps, Map, Polygon, SearchControl } from 'react-yandex-maps';
import { Box } from "@mui/material";

const Maps = () => (
    <YMaps>
        <div style={{width: '100%', position: 'relative', margin: '100px 0 0 0' }}>
            <Box sx={{ display: 'flex', justifyContent: 'center', margin: '0 0 300px 0', height: { xs:500, md: 700 }}}>
                <Map width='90%' defaultState={{ center: [55.758493, 37.839271], zoom: 9, controls: [] }}>
                    <Polygon
                        geometry={[...
                    }}/>
                    <Polygon
                        geometry={[...
                    }}/>
                </Map>
            </Box>
        </div>
    </YMaps>
)

export default Maps

Данный компонент я вставляю внутрь другого:

<Box className={styles.map}>
    <Maps />
</Box>

Собственно проблема: Карта вставляется 2 раза (на скрине). Природа этого явления и как его исправить я не понимаю, так что буду благодарен любым подсказкам.

Answer 1

Яркий пример, простейший компонент имеет простейшую пустую пропсу на борту.

import React, {useEffect, useState} from "react";

export default function App(props) {

    const [progress, setProgress] = useState(0);

    useEffect(() => console.log(progress), [progress]);

    useEffect(() => {
        if (progress !== 0) return;
        setTimeout(() => setProgress(1), 1000);
    }, [progress]);

    useEffect(() => {
        if (progress !== 1) return;
        setTimeout(() => setProgress(2), 1000);
    }, [progress]);

    useEffect(() => {
        if (progress !== 2) return;
        setTimeout(() => setProgress(3), 1000);
    }, [progress]);

    useEffect(() => {
        if (progress !== 3) return;
        setTimeout(() => setProgress("Loaded..."), 1000);
    }, [progress]);

    if (progress === 3) return <h1>Loading...</h1>;
    if (progress === 2) return <h1>Loading..</h1>;
    if (progress === 1) return <h1>Loading.</h1>;
    if (!progress) return <h1>Loading</h1>;
    return <>
        <h1>Hello, World!</h1>
        <pre><code>{progress}</code></pre>
    </>;
}

main().catch(console.error);
async function main() {
    const container = document.getElementById('container');
    const root = ReactDOM.createRoot(container);
    root.render(
        <React.StrictMode>
            <App today="" />
        </React.StrictMode>);

Что нам выводит console.log

App.jsx:7 0
App.jsx:7 0
App.jsx:7 1
App.jsx:7 2
App.jsx:7 3
App.jsx:7 Loaded...

Опа-на.... От куда-то два чёртовых нуля. От куда-же они взялись? 1й раз компонента выгрузилась с пустой пропсой, второй - уже с props.today равной пустой строке.

Answer 2

Конкретно ваш пример воспроизвести не удалось, т.к. вставляется карта только 1 раз. Возможно у вас есть что-то ещё, что может повлиять на кол-во отображения карты

Воспроизводил код без полинонов т.к. не знаю данных:

const { YMaps, Map, Polygon, SearchControl } = ReactYandexMaps;
const { Box } = MaterialUI;

const Maps = () => (
    <YMaps>
        <div style={{width: '100%', position: 'relative', margin: '100px 0 0 0' }}>
            <Box sx={{ display: 'flex', justifyContent: 'center', margin: '0 0 300px 0', height: { xs:500, md: 700 }}}>
                <Map width='90%' defaultState={{ center: [55.758493, 37.839271], zoom: 9, controls: [] }}>
                </Map>
            </Box>
        </div>
    </YMaps>
)

const App = () => {
  return <Maps />;
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

<div id="react"></div>

<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>
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.production.min.js"></script>

А вот и HTML, где явно видно что карта была вставлена только 1 раз:

Answer 3

Столкнулся с той же проблемой, причем на прошлом проекте все работает хорошо. Решил проблему откатом react и react-dom на более раннюю версию.

"react": "^17.0.2",

"react-dom": "^17.0.2"

проблема ушла.

Answer 4

решается с помощью ввода в консоль

npm run build
и
npm run start

Answer 5

Попробуйте пакет @pbe/react-yandex-maps он совместим с оригинальным react-yandex-maps и проблема двойного рендера карты в strict mode решена из коробки.

БЛОГ НА HUSL

Yandex Maps рисует карту дважды

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