單擊標記時未顯示反應傳單彈出窗口

Question

我在我的 ReactJS 應用程序中使用 react-leaflet，我嘗試動態創建標記並添加如下代碼的彈出窗口。 但是沒有顯示彈出框，並且在 web 開發人員控制台中出現錯誤

類型錯誤：點是 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變量或屬性，因此我不確定您為什么會收到此錯誤。

因此，如果我們考慮您發布的代碼，我看不出錯誤的可能原因。

假設您成功獲取數據並將 state 變量數據設置為對象數組。 然后你的代碼應該在演示頁面中看起來像這樣，當然通過在你的例子中使用 componentDidMount 包含獲取代碼（這里使用 static 數據只是為了說明一個例子）

如果您要獲取的數據是 object 而不是數組，那么您在此處的迭代this.state.data.map無效。