如何解决React.js 中的传单 - “dragend”事件异常:“TypeError:无法读取未定义的属性‘调用’”
当这个事件发生时,也就是当用户完成拖动标记时,我得到这个异常。这是我的 React 组件:
import {useState,useEffect,useContext} from 'react';
import L from 'leaflet';
import styles from './styles.module.scss';
import { MapContext } from './../../../../context/MapProvider';
const ZonesBar2 = () => {
const [definingZone,setDefiningZone] = useState(false);
const [markerInput,setMarkerInput] = useState({lat: '',lng: ''});
// const [] = useState();
const [markers,setMarkers] = useState([]);
const {contextData,setContextData} = useContext(MapContext);
const {mapRef,clickLocation} = contextData;
useEffect(()=>{
if(clickLocation.lat) {
// Add markert to map
let newMarker = L.marker([clickLocation.lat,clickLocation.lng],{draggable: true})
.on('dragend',console.log('Marker dragged'))
.addTo(mapRef);
// Add to list of markers
setMarkers((m)=>([...m,newMarker]));
console.log(newMarker.getLatLng());
}
},[clickLocation])
return (
<div className={styles.zonesbar}>
<button onClick={()=>{setDefiningZone((p)=>(!p))}}>Nueva Zona</button>
<div className={`${styles.newMarkerPanel} ${definingZone && styles.visible}`}>
<label>
<span>Nombre:</span>
<input type="text" />
</label>
<label>
<span>Latitud:</span>
<input type="text" id='lat' />
</label>
<label>
<span>Longitud:</span>
<input type="text" />
</label>
<button>+ Marcador</button>
</div>
</div>
)
}
export default ZonesBar2;
老实说,我无法弄清楚发生了什么......我确实需要您的专家的帮助。 这是错误的屏幕截图:
解决方法
那里发生了很多事情,但我看到的是:
let newMarker = L.marker([clickLocation.lat,clickLocation.lng],{draggable: true})
.on('dragend',console.log('Marker dragged')) // <-- bad times right here
.addTo(mapRef);
当您编写 console.log('something')
时,会立即计算该表达式。并且 console.log 返回 undefined
...所以传单试图触发一个函数,它是 undefined
。你需要这个:
let newMarker = L.marker([clickLocation.lat,() => { console.log('Marker dragged') }) // <-- callback
.addTo(mapRef);
现在您正在传递一个正确的回调,它是一个函数,而不是 console.log()
的返回值。
你必须传递一个函数引用:
let newMarker = L.marker([clickLocation.lat,{draggable: true})
.on('dragend',console.log('Marker dragged'))
.addTo(mapRef);
也在最后处理处理程序:
return ()=> { newMarker.off('dragend'); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。