Reactjs React事件多次触发
我目前正在开发一个使用React和传单的小应用程序，其目的是通过用户添加到地图上的所有标记找到最佳路线 代码运行得很好，但我的问题是，一旦我单击按钮开始路由，每次我再次单击它，它就会在后台“堆叠”。 更具体地说，它在后台使用旧标记多次运行（onClick事件），直到应用程序崩溃 我已经尝试了许多不同的方法来解决这个问题，但到目前为止还没有一种有效的方法 App.js（主代码）Reactjs React事件多次触发,reactjs,leaflet,Reactjs,Leaflet,我目前正在开发一个使用React和传单的小应用程序，其目的是通过用户添加到地图上的所有标记找到最佳路线 代码运行得很好，但我的问题是，一旦我单击按钮开始路由，每次我再次单击它，它就会在后台“堆叠”。 更具体地说，它在后台使用旧标记多次运行（onClick事件），直到应用程序崩溃 我已经尝试了许多不同的方法来解决这个问题，但到目前为止还没有一种有效的方法 App.js（主代码） import React，{createRef，Component}来自“React”； 导入“/App.css”； 从
import React，{createRef，Component}来自“React”；
导入“/App.css”；
从“传单”导入L，{Point}；
从“react传单”导入{Map，tillelayer，Marker，Popup，LayerGroup}；
从“传单/dist/images/marker icon.png”导入图标；
从“/routingMachine”导入路由；
"反应传单管制"的进口管制;；
设DefaultIcon=L.icon({
iconUrl：图标，
iconAnchor:[10,55]，
});
L.Marker.prototype.options.icon=DefaultIcon；
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
isMapInit：错，
位置：false，
旗帜：是的，
板条：{
拉脱维亚：31.0461，
液化天然气：34.8516，
},
标记：[]，
rMarkers:[]，
};
this.routingEvent=this.routingEvent.bind（this）；
}
saveMap=map=>{
this.map=map；
这是我的国家({
isMapInit：是的
});
};
mapRef=createRef（）
addMarker=（e）=>{
const{markers，flag}=this.state
国际单项体育联合会（旗）{
标记器。推动（如板条）
this.setState（{markers}）
}
}
routingEvent=事件=>{
L.DomEvent.stopPropagation（事件）；
const{rMarkers，markers，flag}=this.state
设rMarkers2=markers.slice（）
const map=this.map
让指针=这个
设myLocation=null
if（map！=null&&flag==true）
{
myLocation=map.FloapElement.locate（{setView:false，maxZoom:16}）.on（'locationfound'，函数（e）{
rMarkers2.取消提升（如板条）
如果（rMarkers2.长度>=2）{
console.log（“newMarkers”）
console.log（rMarkers2）
console.log（pointer.map.element）
pointer.btnReview.setAttribute（“禁用”、“禁用”）；
pointer.setState（（state，props）=>（{rMarkers:rMarkers2，markers:[]，flag:false}））
}
否则{
console.log（“点数不足”）；
}
});
}
}
handleClick=事件=>{
const{lat，lng}=event.latlng
此.addMarker（事件）
}
updateRoute=（）=>{
this.setState（（state，props）=>（{markers:[]，rMarkers:[]，flag:true}））
this.btnReview.removeAttribute（“已禁用”）
}
render（）{
常量标记=this.state.hasLocation(
你来了
)：null
返回(
{this.state.markers.map（（位置，idx）=>
弹出窗口
)}
重置标记
{this.btnReview=btnReview；}}>
计划路线
);
}
}
import { MapLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet-routing-machine";
import { withLeaflet } from "react-leaflet";
import React from 'react';
class Routing extends MapLayer {
constructor(props) {
super(props);
}
createLeafletElement() {
console.log("ele-leaf create");
const { map ,pointM} = this.props;
console.log(pointM);
console.log(this.props.pointM);
let leafletElement = L.Routing.control({
waypoints: this.props.pointM
}).addTo(map.leafletElement);
this.routing = leafletElement;
return leafletElement.getPlan();
}
updateLeafletElement(fromProps, toProps) {
console.log('leafletUPDATE')
console.log(fromProps)
console.log(toProps)
if(fromProps.pointM != toProps.pointM && (toProps.routingFlag == false)){
const { map ,pointM,routing} = toProps;
function generatePermutations(Arr){
var permutations = [];
var A = Arr.slice();
function swap(a,b){
var tmp = A[a];
A[a] = A[b];
A[b] = tmp;
}
function generate(n, A){
if (n == 1){
permutations.push(A.slice());
} else {
for(var i = 0; i <= n-1; i++) {
generate(n-1, A);
swap(n % 2 == 0 ? i : 0 ,n-1);
}
}
}
generate(A.length, A);
return permutations;
}
var Points =[];
toProps.pointM.forEach(e=>{
Points.push([e.lat,e.lng]);
});
var x = generatePermutations(Points);
var l = [];
if(x.length <2){
console.log("no dist");
console.log(this.routing);
this.routing.setWaypoints([]);
}
else{
var myLocation = [toProps.pointM[0].lat,toProps.pointM[0].lng]
const Undef = 1000000;
x.forEach(e=>{
if(e[0][0] == myLocation[0] && e[0][1] == myLocation[1])
{
var sum=0;
for(var i=0; i < e.length-1 ; i++){
sum+=distance(e[i][0], e[i][1], e[i+1][0], e[i+1][1], 'K');
}
l.push(sum);
}else{
l.push(Undef)
}
});
var route = l.indexOf(Math.min.apply(null,l));
this.routing.setWaypoints(x[route]);
console.log(x[route]);
}
function distance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var radlon1 = Math.PI * lon1/180
var radlon2 = Math.PI * lon2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180/Math.PI
dist = dist * 60 * 1.1515
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist
}
}
}
componentDidMount() {
super.componentDidMount()
console.log("update")
}
}
export default withLeaflet(Routing);
从“反应传单”导入{MapLayer}；
从“传单”中输入L；
进口“传单传送机”；
从“react传单”导入{With传单}；
从“React”导入React；
类路由扩展了MapLayer{
建造师（道具）{
超级（道具）；
}
createElement（）{
console.log（“ele-leaf-create”）；
const{map，pointM}=this.props；
console.log（pointM）；
console.log（this.props.pointM）；
设元素=L.Routing.control({
航路点：this.props.pointM
}).addTo（映射元素）；
this.routing=元素；
返回元素getPlan（）；
}
UpdateLabletElement（fromProps，toProps）{
console.log（'更新'）
console.log（fromProps）
console.log（toProps）
if（fromProps.pointM！=toProps.pointM&&（toProps.routingFlag==false））{
const{map，pointM，routing}=toProps；
函数生成项置换（Arr）{
var置换=[]；
变量A=Arr.slice（）；
功能交换（a、b）{
var tmp=A[A]；
A[A]=A[b]；
A[b]=tmp；
}
函数生成（n，A）{
如果（n==1）{
置换.推（A.切片（））；
}否则{
对于（var i=0；i{
点推力（[e.lat，e.lng]）；
});
var x=生成项（点）；
var l=[]；
if（x.length{
如果（e[0][0]==myLocation[0]&&e[0][1]==myLocation[1]）
{
var总和=0；
对于（变量i=0；iimport { MapLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet-routing-machine";
import { withLeaflet } from "react-leaflet";
import React from 'react';
class Routing extends MapLayer {
constructor(props) {
super(props);
}
createLeafletElement() {
console.log("ele-leaf create");
const { map ,pointM} = this.props;
console.log(pointM);
console.log(this.props.pointM);
let leafletElement = L.Routing.control({
waypoints: this.props.pointM
}).addTo(map.leafletElement);
this.routing = leafletElement;
return leafletElement.getPlan();
}
updateLeafletElement(fromProps, toProps) {
console.log('leafletUPDATE')
console.log(fromProps)
console.log(toProps)
if(fromProps.pointM != toProps.pointM && (toProps.routingFlag == false)){
const { map ,pointM,routing} = toProps;
function generatePermutations(Arr){
var permutations = [];
var A = Arr.slice();
function swap(a,b){
var tmp = A[a];
A[a] = A[b];
A[b] = tmp;
}
function generate(n, A){
if (n == 1){
permutations.push(A.slice());
} else {
for(var i = 0; i <= n-1; i++) {
generate(n-1, A);
swap(n % 2 == 0 ? i : 0 ,n-1);
}
}
}
generate(A.length, A);
return permutations;
}
var Points =[];
toProps.pointM.forEach(e=>{
Points.push([e.lat,e.lng]);
});
var x = generatePermutations(Points);
var l = [];
if(x.length <2){
console.log("no dist");
console.log(this.routing);
this.routing.setWaypoints([]);
}
else{
var myLocation = [toProps.pointM[0].lat,toProps.pointM[0].lng]
const Undef = 1000000;
x.forEach(e=>{
if(e[0][0] == myLocation[0] && e[0][1] == myLocation[1])
{
var sum=0;
for(var i=0; i < e.length-1 ; i++){
sum+=distance(e[i][0], e[i][1], e[i+1][0], e[i+1][1], 'K');
}
l.push(sum);
}else{
l.push(Undef)
}
});
var route = l.indexOf(Math.min.apply(null,l));
this.routing.setWaypoints(x[route]);
console.log(x[route]);
}
function distance(lat1, lon1, lat2, lon2, unit) {
var radlat1 = Math.PI * lat1/180
var radlat2 = Math.PI * lat2/180
var radlon1 = Math.PI * lon1/180
var radlon2 = Math.PI * lon2/180
var theta = lon1-lon2
var radtheta = Math.PI * theta/180
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
dist = Math.acos(dist)
dist = dist * 180/Math.PI
dist = dist * 60 * 1.1515
if (unit=="K") { dist = dist * 1.609344 }
if (unit=="N") { dist = dist * 0.8684 }
return dist
}
}
}
componentDidMount() {
super.componentDidMount()
console.log("update")
}
}
export default withLeaflet(Routing);