我有一个简单的组件,可以在地图上选择点,然后显示与该点相关的一些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-leaflet
作者后,我找到了实现期望行为的方法。要强制React重新渲染我的GeoJSON数据,我需要向组件传递一些唯一的数据键。<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} />
https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071