单击标记时反应传单弹出窗口不显示

Question

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

TypeError: point is null

我正在使用 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 变量或属性，因此我不确定您为什么会收到此错误。

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

假设您已成功获取数据并将状态变量数据设置为一个对象数组。那么你的代码应该看起来像这样 in the demo page，当然是像你的例子一样使用 componentDidMount 来包含获取代码（这里使用静态数据只是为了说明一个例子）

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

单击标记时反应传单弹出窗口不显示

react-leaflet Popup not showing when clicking marker

javascript

popup

leaflet

reactjs

react-leaflet