我有简单的组件来在地图上选取点,然后显示与该点相关的一些 GeoJSON 数据:
import React, { Component } from 'react';
import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { connect } from 'react-redux';
import './style.css';
import { setPoint, fetchData } from '../../actions/map';
@connect(store => {
return {
map: store.map
}
})
class MyMap extends Component {
mapClick(e) {
this.props.dispatch(setPoint(e.latlng));
this.props.dispatch(fetchData(e.latlng));
}
render() {
const marker = () => {
if(this.props.map.point) {
return <Marker position={this.props.map.point} />;
}
};
const data = () => {
if(this.props.map.data.length > 0) {
const json = this.props.map.data;
return <GeoJSON data={json} />
}
}
return (
<div className='my-map'>
<div className='my-map__map-container'>
<Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}>
<TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
{marker()}
{data()}
</Map>
</div>
<div className='my-map__debug'>
{JSON.stringify(this.props.map)}
</div>
</div>
);
}
}
export default MyMap;
第一次我点击地图标记出现,经过一段时间的延迟(XHR 请求)GeoJSON 渲染。但下次我单击地图时,我只看到标记位置发生变化,但旧的 GeoJSON 数据仍保留在地图上。调试组件的一部分正确呈现,并显示正确的数据。我如何强制
react-leaflet
重新渲染我的 GeoJSON 数据,或者我可能做错了什么?
更新:
在询问了
react-leafet
的作者后,我找到了如何达到预期的行为。
为了强制反应重新渲染我的 GeoJSON 数据,我需要将一些 data-uniq 密钥传递给组件:
<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} />
https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071
在询问
react-leafet
的作者后,我找到了如何达到预期的行为。
为了强制反应重新渲染我的 GeoJSON 数据,我需要将一些 data-uniq 密钥传递给组件:
<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} />
https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071
import hash from 'object-hash';
render() {
let blah = this.state; //or this.props or whatever
<GeoJSON
key={hash(blah)}
data={blah} />
从每次调用渲染方法时创建的函数调用标记和 geojson 的性能不会很高。另外,我认为您可能需要向地图元素添加一个键,以便它们可以正确重用和更新。
试试这个:
render() {
return (
<div className='my-map'>
<div className='my-map__map-container'>
<Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}>
<TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
{this.props.map.point &&
<Marker key='my-marker' position={this.props.map.point} />
}
{this.props.map.data.length > 0 &&
<GeoJSON key='my-geojson' data={this.props.map.data.json} />
}
</Map>
</div>
<div className='my-map__debug'>
{JSON.stringify(this.props.map)}
</div>
</div>
);
}
在新版本的React中我使用下面的代码
import { GeoJSON } from "react-leaflet/GeoJSON";
const [data, setData] = useState(null)
useEffect(()=>{
fetch("/geojson path...")
.then((res) => {
return res.json();
})
.then((geoJson) => {
setData(geoJson);
});
},[])
// use in JSX
{currentGeoJsonData && (
<GeoJSON
ref={data}
key={Math.random() + i}
data={data}
/>
)}