Ошибка при загрузке базовой карты-листовки.

Я новичок в реагировании-листовке. Я работаю над проектом Flask React и пытаюсь загрузить карту-листовка с реакцией. Я получаю следующую ошибку:

Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
at react-leaflet.js:7
at React__default (react-leaflet.js:4)
at react-leaflet.js:5

Версии:

реагировать-листовка: v1.9.1 leaflet.css: v1.3.1 реагировать-leaflet.js: v1.9.1

Я добавил необходимые маршруты для рендеринга Appbody. Но я не могу понять, что не так.

import React, {Component} from 'react'
import {Map, Marker, Popup, TileLayer} from 'react-leaflet'

const position = [51.505, -0.09]

class MainMap extends Component {
	render() {
		return (
			<div>
				<Map center={position} zoom={13}>
					<TileLayer
						url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
						attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
					/>
					<Marker position={position}>
						<Popup>
							<span>A pretty CSS3 popup.<br/>Easily customizable.</span>
						</Popup>
					</Marker>
				</Map>
			</div>
		);
	}
}

export default MainMap;

import React, {Component} from 'react';
import MainMap from "./map";

class AppBody extends Component {
	render() {
		return (
			<div>
					<MainMap/>
			</div>
		);
	}
}

export default AppBody;

.leaflet-container {
    position: absolute;
    height: 100%;
    width: 100%;
}


react-leaflet
person John    schedule 23.04.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

В настоящее время я использую листовку response, и у меня никогда не было такой ошибки, но я вижу что-то не так в коде (я не знаю, решают ли они проблему). Во-первых, вы импортировали файл leaflet.css? Вам нужно импортировать это в index.js или в текущий файл import "leaflet/dist/leaflet.css"; Вы также должны добавить реквизиты ref в компонент карты, как это <Map ref = "map" {...otherprops} >

person benn98    schedule 24.04.2018

arrow_upward
0
arrow_downward

Я думаю, что единственная проблема в вашем коде заключается в окружении элемента Map тегами div. Так что, если вы удалите их и сделаете элемент карты вверху, проблема должна быть решена.

person Uncle Bent    schedule 31.08.2018

arrow_upward
0
arrow_downward

TL; DR Не включайте CDN-лист с реакцией в свой index.html, если вы установили его с помощью npm или yarn.

Что ж, после долгих попыток самостоятельно решить эту проблему, я думаю, что вы, возможно, неправильно настроили что-то в <head> вашего index.html, вот как я это настроил до с возникшей ошибкой:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.0.0/react-leaflet.js"></script>

и решение вопроса:

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

Заметили разницу? Если вы установили react-leaflet с npm или yarn, вы увидите, что вам не нужно добавлять сценарий листовки в ваш <head>. Раньше происходило то, что сценарий response-листовки загружался до файлов js, запакованных через Интернет, и поэтому не мог найти React. Исходный код листовки-реакции, который выдал ошибку, выглядел так:

var React__default = 'default' in React ? React['default'] : React;

И очевидно, что если вообще не было объекта React, при попытке найти ключ «по умолчанию» возникнет ошибка.

Надеюсь, это когда-нибудь поможет кому-то!

person Sark Peha    schedule 12.11.2020