reactjs - 为什么 react-google-maps 渲染一个 Circle 组件两次?
问题描述
当我将 react-google-maps 添加到项目时,渲染工作了两次。所以我有 2 个圆圈,一个接一个。另外,我通过 onDragEnd() 方法显示中心坐标。此活动仅适用于其中一个圈子。
项目中不存在任何其他谷歌地图。
这是我尝试修复它的一些方法:1)仅与GoogleMap一起使用,2)在父组件的render()方法中使用GoogleMapsWrapper组件,3)使用componentDidMount(); 尝试一切从 satckoverflow :) 并没有任何帮助。
import React, { Component } from 'react';
import MapForm from './mapForm';
import { GoogleMap, withGoogleMap, withScriptjs, Circle } from 'react-google-maps';
const GoogleMapsWrapper = withScriptjs(withGoogleMap(props => {
const {onMapMounted, ...otherProps} = props;
return <GoogleMap {...otherProps} ref={c => {
onMapMounted && onMapMounted(c)
}}>{props.children}</GoogleMap>
}));
class GoogleMapsContainer extends Component {
state = {
coords: {lat:0, lng: 0}
};
dragCircle = () => {
this.setState({
coords: {
lat: this._circle.getCenter().lat(),
lng: this._circle.getCenter().lng()
}
})
}
render() {
return(
<div style={{display: 'flex',flexDirection: 'row', width: '100%', marginLeft: '37px'}}>
<MapForm
filters={this.props.filters}
coords={this.state.coords}
/>
<GoogleMapsWrapper
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${KEY}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{height: `100%`}}/>}
containerElement={<div style={{position: 'relative',width: '100%', }} />}
mapElement={<div style={{height: `100%`}}/>}
defaultZoom={13}
defaultCenter={KYIV}
>
<Circle
ref={(circle) => {this._circle = circle}}
defaultCenter = {KYIV}
defaultDraggable={true}
defaultEditable={true}
defaultRadius={2000}
onDragEnd = {this.dragCircle}
options={{
strokeColor: `${colors.vividblue}`,
fillColor: `${colors.vividblue}`,
fillOpacity: 0.1
}}
/>
</GoogleMapsWrapper>
</div>
)
}
}
export default GoogleMapsContainer;
我的方法只需要一个圆圈。我的圈子
解决方案
好的,问题出在项目中的 React StrictMode 组件中。
推荐阅读
- javascript - 如何滚动查看数组中的特定项目
- python - 在 NumPy 中有效地计算给定向量元素的所有成对乘积
- javascript - nodejs crypto 和 CryptoJS 提供不同的 base64(sha256(data)) 输出
- c# - vscode 不会显示函数的参数
- c - C中的值返回变化
- windows - 窗口 zip 排除路径模式
- mysql - 为什么参数不传递给这个雄辩的 DB::raw 查询导致它抛出“SQLSTATE [HY093]:无效参数号”错误
- python - 将python数据帧数据类型从对象转换为日期时间的问题
- laravel - Laravel:ErrorException:试图获取非对象的属性
- c++ - 按 c++ asc 和 desc 顺序对向量进行排序