我得到一个错误“您试图设置与值latitude
关键xx.xxxxx
即意味着是不可改变的,当我的应用程序开始时或当我试着通过回调功能可按改变区域的坐标已被冻结的对象上。
我的目标是能够改变像谷歌地图从输入字段的区域位置。但每当我改变坐标我得到这个错误。我试着用重新描绘新的坐标和工作的地图,但会做很多的请求。
有没有给予该地区新的坐标并显示它没有重新描绘整个地图的方法吗?
这里是我的代码:
export default class Map extends Component{
constructor(){
super();
this.state = {
region: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
},
radius: 500
}
}
componentWillMount(){
}
regionChange = (region) =>{
let reg = this.state.region;
reg.latitude = region.latitude;
reg.longitude = region.longitude;
this.setState({region:reg});
}
changeRadius = (radius) => {
this.setState({radius});
console.log("RADIUS", this.state.radius);
}
render(){
return (
<View style={ styles.map }>
<MapView
provider={PROVIDER_GOOGLE}
style={ styles.map }
region={this.state.region}
onRegionChangeComplete={(region) => {this.regionChange(region)}}
onPress={(event) => this.regionChange(event.nativeEvent.coordinate)}
>
<MapView.Circle
center = { this.state.region }
radius = { this.state.radius }
strokeWidth = { 1 }
strokeColor = { '#1a66ff' }
fillColor = { 'rgba(230, 238, 255, 0.5)' }
onRegionChangeComplete = {(region) => {this.regionChange({region});console.log(region)}}
/>
<Marker
coordinate = { this.state.region }
title = {"Marker"}
description = {"Marker description"}
/>
</MapView>
<Slider
step={50}
maximumValue={2000}
onValueChange={(value) => this.changeRadius(value)}
value={this.state.radius}
style={{marginTop:10}}
/>
<Autocomplete regionChange={(reg) => this.regionChange(reg)} />
</View>
)
}
}
对象不是原始数据类型。因此,他们是按值按引用传递。在你的代码,当你做了let reg = this.state.region
你做出了参考this.state.region。所以,当你发生变异REG,你直接变异状态,这是一个很大的没有在反应。
我建议你使用传播经营者,使国家的新副本。 let reg = { ...state, {} }