错误: App(...)：render未返回任何内容。Esri-Leaflet-地理编码器

Question

我正在使用esri-leaflet-geocoder在我的expo项目中创建一个地理搜索栏。我正在使用这个演示作为一个准则：https://codesandbox.io/s/2wy7v2orwr?file=/src/Map.js:1443-1466。我遇到了一个Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.错误，我似乎找不到正确的解决方案。下面是我的代码：

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';


export default function App() {
  class MapComp extends 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',
  },
});

Answer 1

这个错误是正确的，你在功能组件(MapComp)中声明了一个基于类的组件()，但是应用组件没有返回任何要在DOM中呈现的东西，所以当你想要将你的React应用程序挂载到DOM中时，React不会识别来自应用组件的任何Render方法(这只是功能组件中的一个返回)，请确保从你的功能组件( App )中返回一些东西。实际上，您并没有从中返回任何内容。