为什么Circle在react-google-maps中还原其半径？

Question

我有一个react应用，当您单击地图时，它会向地图添加一个圆，该圆的默认半径为20。每次添加一个圆时，此半径都会显示得很好，但是以前的所有圆的半径都将恢复为.2。我的渲染基本上是：

<MapComponent
    defaultZoom={18}
    defaultCenter={this.props.center}
    onClick={this.props.onMapClick}
>
    {this.props.circles.map((singleCircle) => {
        return <Circle
            center={singleCircle.centerPoint.latLng()}
            radius={singleCircle.radius}
            key={singleCircle.id}
       />
    })}
</MapComponent>

我到处都有console.log()。半径已经过去了，但是如果不是最近放置的位置，则组件将无法渲染正确的半径。

Answer 1

我不知道为什么，但这是解决方案：

<Circle
    options={{...someCircleOptions, radius: obstacle.radius}}
    center={singleCircle.centerPoint.latLng()}
    radius={singleCircle.radius}
    key={singleCircle.id}
/>

最重要的一点是radius: obstacle.radius被传递给道具options。知道为什么这会取代radius道具。