Получение ошибки при изменении координат региона на реактивных картах

Я получаю сообщение об ошибке "Вы попытались установить ключ latitude со значением xx.xxxxx для объекта, который должен быть неизменяемым и был заморожен. при запуске моего приложения или при попытке изменить координаты региона с помощью функции обратного вызова.

Моя цель - иметь возможность изменить местоположение региона из поля ввода, например, на Картах Google. Но всякий раз, когда я меняю координаты, я получаю эту ошибку. Я попытался перерендерить карту с новыми координатами, и это работает, но это будет выполнять много запросов.

Есть ли способ дать региону новые координаты и показать его без повторного рендеринга всей карты?

Вот мой код:

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.info("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.info(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>
    )
  }
}
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
917
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Объекты не являются примитивными типами данных. Таким образом, они передаются по значению по ссылке. В вашем коде, когда вы делали let reg = this.state.region, вы сделали ссылку на this.state.region. Итак, когда вы мутируете reg, вы напрямую мутируете состояние, что является большим запретом в реакции.

Я предлагаю вам использовать оператор распространения, чтобы сделать новую копию состояния. let reg = { ...state, {} }

Пожалуйста, отметьте это как ответ, чтобы этот пост можно было закрыть. :)

Atin Singh 11.02.2019 14:48

Другие вопросы по теме