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

Question

I'm using react-leaflet in my ReactJS application and I tried to create markers dynamically and added popup as below code. But popup box is not showing and there is an error appear in web developer console

TypeError: point is null

I am using react-leaflet version 2.5.0. Please kindly advise!

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

I see no point variable or property in your code, therefore I am not really sure why you get this error.

So I do not see the error's possible cause if we take into account the code you have posted.

Let's assume you fetch successfully the data and you set the state variable data an array of objects. Then your code should look like this in the demo page , of course by including the fetching code using componentDidMount as in your example (here using static data just to illustrate an example)

If the data you are fetching is an object and not an array then your iteration here this.state.data.map is not valid.