Question

我在ReactJS应用程序中使用react-leaflet，我尝试动态创建标记并按以下代码添加弹出窗口。但是没有显示弹出框，并且Web开发人员控制台中出现错误

TypeError：点为空

我正在使用react-leaflet版本2.5.0。请指教！

import React, { Component, useState } from 'react';
import { Map as Mapview, TileLayer, Marker, Popup, GeoJSON  } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import {API_URL} from "../../config/config";
import axios from "axios";
import { iconBlue, iconWell } from './icons';

//import { Popover, PopoverBody, PopoverHeader } from 'reactstrap';

class Map extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data : [],
            zoom: 2,
            //modal: false,
        };

        this.getLocationList = this.getLocationList.bind(this);
        //this.setModal = this.setModal.bind(this);
    }

    // setModal(val){
    //     this.setState({modal: val});
    // }

    componentDidMount(){
        this.getLocationList();
    }

    getLocationList(){
        axios.get(API_URL + "location")
            .then((response) => {
            if(response.data.status === "success")
            {
                this.setState({data: response.data.location});
                console.log(this.state.data);
            }
        })
    }

    render() {


        return (
        <div>
            <Mapview 
            style={{ height: "480px", width: "100%" }}
            zoom={6}
            center={[19.745589, 96.15972]}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                {
                    this.state.data.map((location) => 
                    <Marker position={[location.location_lat, location.location_long]} icon={iconWell}>
                        <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
                    </Marker>
                    )
                }
            </Mapview>
        </div>
        );
    }
}

export default Map;

Answer 1

我在您的代码中没有看到point变量或属性，因此我不确定为什么会出现此错误。

因此，如果考虑到您发布的代码，我看不到错误的可能原因。

让我们假设您已成功获取数据，并将状态变量data设置为对象数组。然后，您的代码应该看起来像in the demo page，当然，如示例中那样，使用componentDidMount包含了获取代码（此处使用静态数据只是为了说明示例）

如果您要获取的数据是对象而不是数组，则您在this.state.data.map处的迭代无效。

单击标记时未显示react-leaflet Popup

1 个答案: