React Leaflet:有没有一种方法可以让onClick方法添加一个标记，并用该标记的位置更新状态？(初学者反应)

Question

我见过他们使用Map组件的解决方案，但我读到它已经更新到没有onClick方法的MapContainer。现在，我的代码(如下所示)允许我在单击地图上的任意位置时添加一个标记。正如我的标题所述，我如何将新的标记存储在某种可用变量中。我的最终目标是在MongoDB中存储新的标记。提前谢谢。

import React, { Component } from 'react';
import {
  MapContainer,
  TileLayer,
  MapConsumer,
} from "react-leaflet";
import Leaflet from "leaflet";
import { connect } from 'react-redux';

import { Icon } from "../Leaflet/Configurations";
import NavBar from '../components/NavBar';
import Footer from '../components/Footer';
import { registerHouse } from '../actions/houseActions';
import { clearErrors } from "../actions/errorActions";
import "leaflet/dist/leaflet.css";

class MyMap extends Component{
    constructor(props){
        super(props);
        this.state = {
            markers: [[40.7, -74]],
            data: []
        };
        this.addMarker = this.addMarker.bind(this);
    }
    
    render(){
        return(
            <div>
                <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossOrigin=""/>
                <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossOrigin=""></script>
                <NavBar/>
                {/* <MapContainer className="Map" center={{ lat: 40.7 , lng: -74 }} zoom={15} scrollWheelZoom={false}>
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <MapConsumer>
                        {(map) => {
                            console.log("map center:", map.getCenter());
                            map.on("click", function (e) {
                                const { lat, lng } = e.latlng;
                                Leaflet.marker([lat, lng], { Icon }).addTo(map);
                                let tmp = this.state.data;
                                tmp.append([lat,lng]);
                                this.setState({data:tmp});
                            });
                            return null;
                        }}
                    </MapConsumer>
                </MapContainer> */}
                <Footer/>
            </div>
        )
    }
}


const mapStateToProps =  state => ({
    isAuthenticated: state.auth.isAuthenticated,
    error: state.error
});

export default connect(mapStateToProps, { registerHouse, clearErrors })(MyMap);

Answer 1

我不确定您的代码的这一部分是否有效：

let tmp = this.state.data;
tmp.append([lat,lng]);
this.setState({data:tmp});

为什么？因为在map.on('click)块范围内未定义this.state。它在那里失去了它的引用。

因此，您可以做的就是创建一个自定义的MapContainer子组件，并利用react中一个称为从子组件向父组件引发事件的概念。父进程会向子进程发送一个事件，子进程会在发生事件时调用该函数。

function MyComponent({ saveMarkers }) {
  const map = useMapEvents({
    click: (e) => {
      const { lat, lng } = e.latlng;
      L.marker([lat, lng], { icon }).addTo(map);
      saveMarkers([lat, lng]);
    }
  });
  return null;
}

并在您的MyMap comp中定义事件

saveMarkers = (newMarkerCoords) => {
    const data = [...this.state.data, newMarkerCoords];
    this.setState((prevState) => ({ ...prevState, data }));
};

它将作为道具传递给自定义comp：

 <MapContainer
   ...
  <MyComponent saveMarkers={this.saveMarkers} />
 </MapContainer>

Demo