Question

我是反应传单的新手。我正在研究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

版本：

react-leaflet：v1.9.1 leaflet.css：v1.3.1 react-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%;
}

Answer 1

我目前正在使用react-leaflet并且我从未遇到过这种错误，但我可以在代码中看到错误（我不知道这些是否能解决问题）。首先导入leaflet.css文件？您需要在index.js或当前文件中导入它 import "leaflet/dist/leaflet.css"; 你还必须像这样在地图组件中添加一个ref道具 <Map ref = "map" {...otherprops} >

Answer 2

我认为您代码中唯一的问题是 div标签围绕Map元素。因此，如果删除它们并将Map元素放在顶部，那么该问题应该得到解决。

Answer 3

TL; DR 如果已使用npm或yarn安装了react-leaflet CDN，请不要将它放在index.html中。

好吧，我自己对问题进行了很多研究之后，我认为您可能在index.html的<head>中设置不正确，这就是我在之前设置它们的方式发生错误：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/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/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

注意区别吗？如果您将react-leaflet与npm或yarn一起安装，将会看到您不需要在<head>中添加传单脚本。之前发生的是，react-leaflet脚本在webpacked js文件之前加载，因此找不到React。引发错误的react-leaflet源代码如下所示：

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

很显然，如果首先没有React对象，则在尝试查找“默认”键时会出现错误。

希望有一天能对某人有所帮助！

加载基本反应传单地图时出错

3 个答案: