Question

我正在处理这个项目，但遇到了这个错误。我还没有找到适合我的代码的解决方案。错误=

<块引用>

元素类型无效：应为字符串（对于内置组件）或一个类/函数（用于复合组件）但得到：未定义。

它也要求我

<块引用>

检查App的render方法。

这是我的代码。

import { StatusBar } from 'expo-status-bar';
import React, { Component, createRef } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import L from 'leaflet';
import * as ELG from 'esri-leaflet-geocoder';
import { Map, TileLayer } from 'react-leaflet';



 class App extends React.Component {
  
    componentDidMount() {
      const map = this.leafletMap.leafletElement;
      const searchControl = new ELG.Geosearch().addTo(map);
      const results = new L.LayerGroup().addTo(map);
  
      searchControl.on("results", function(data) {
        results.clearLayers();
        for (let i = data.results.length - 1; i >= 0; i--) {
          results.addLayer(L.marker(data.results[i].latlng));
        }
      });
    }
   
  render() {
    const center = [37.7833, -122.4167];
    return (
      <Map
        style={{ height: "100vh" }}
        center={center}
        zoom="10"
        ref={m => {
          this.leafletMap = m;
        }}
      >
        <TileLayer
          attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap</a> contributors"
          url={"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
        />
        <div className="pointer" />
      </Map>
    );
  }
}

  




const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});


export default App;

Answer 1

查看 React Leaflet 文档似乎没有 Map 组件。这意味着您的代码中 Map 的值设置为 undefined，这会导致您收到错误。

将 Map 更改为 MapContainer 就可以了。

React Leaflet 项目可能选择这个名称是为了不与 JavaScript Map 类冲突。

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。 - Esri 传单

1 个答案: