Question

我正在使用 esri-leaflet-geocoder 在我的博览会项目中创建地理搜索栏。我将此演示用作指导方针：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 没有识别来自 App 组件的任何 Render 方法（这只是函数组件中的返回），请确保从你的函数组件返回一些东西（应用程序）。你实际上并没有从中返回任何东西。

错误：App(...)：渲染没有返回任何内容。 Esri-Leaflet-Geocoder

1 个答案: