0

我正在使用 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',
  },
});
4

1 回答 1

0

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

于 2021-01-19T20:42:04.373 回答