元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。-埃斯里传单

Question

我正在做这个项目，我会发现这个错误。我还没有找到适合我的代码的解决方案。误差=

元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。

它也要求我

检查应用程序的呈现方法。

这是我的密码。

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传单文档来看，似乎没有Map组件。这意味着代码中Map的值被设置为undefined，这将导致接收到的错误。

将Map转换为MapContainer，您应该就可以了。

React传单项目可能选择此名称以避免与JavaScript Map类冲突。