Reactjs 为什么谷歌地图会两次渲染一个圆组件？

当我将react google maps添加到项目中时，渲染工作了两次。我有两个圆圈，一个接一个。此外，我还通过onDragEnd（）方法显示中心坐标。此事件仅适用于其中一个圈子

项目中不存在任何其他谷歌地图

以下是我试图修复它的一些方法： 1） 仅与谷歌地图一起使用， 2） 在父组件的render（）方法中使用GoogleMapsRapper组件， 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;

import React，{Component}来自'React'；
从“/MapForm”导入MapForm；
从“react GoogleMaps”导入{GoogleMap，withGoogleMap，withScriptjs，Circle}；
const GoogleMapsWrapper=withScriptjs（withGoogleMap（props=>{
const{onMapMounted，…otherProps}=props；
返回{
onMapMounted&&onMapMounted（c）
}}>{props.children}
}));
类GoogleMapsContainer扩展组件{
状态={
坐标：{lat:0，lng:0}
};
dragCircle=（）=>{
这是我的国家({
协调：{
lat:this.\u circle.getCenter（）.lat（），
lng:this.\u circle.getCenter（）.lng（）
}
})
}
render（）{
返回(
{this._circle=circle}}
defaultCenter={KYIV}
DefaultDragTable={true}
defaultEditable={true}
defaultRadius={2000}
onDragEnd={this.dragCircle}
选择权={{
strokeColor:`${colors.livertblue}`，
fillColor:`${colors.livertblue}`，
填充不透明度：0.1
}}
/>
)
}
}
导出默认GoogleMapsContainer；

---

我的方法只需要一个圆圈。

好的，问题在项目中的React StrictMode组件中。

好的，问题在项目中的React StrictMode组件中