Блог

Я думал, что это простая проблема с синтаксисом, но, возможно, это более широкая концепция, которую я не понимаю в отношении иерархии и наследования.

Я создаю приложение в react native (expo). Я хочу отобразить карту, ориентированную на пользователя, которая постоянно обновляется (в конечном итоге я буду использовать watchCurrentPositionAsync, но поскольку я новичок, я хочу просто попробовать собрать информацию о местоположении один раз, а затем выяснить это оттуда). Приведенный ниже код успешно отображает карту, когда вводятся необработанные значения для широты и долготы, но, похоже, я не могу извлечь значения из своего объекта состояния для использования в render() .

Строки, отмеченные //RIGHT HERE знаком, — это то, где я хочу использовать значения lat / long, сохраненные в моем объекте состояния — прямо сейчас я установил для них константы, чтобы мое приложение функционировало.

Я попытался заменить эти константы на:

 this.state.initLat_s
this.state[initLat_s]
 

Я попытался создать другую структуру «regData» и ссылаться на нее несколькими способами, в том числе ссылаться на нее, чтобы получить всю информацию для initialRegion, включая дельты

Я создал функции «get ()» как внутри, так и за пределами состояния, которые выдавали ошибки

Я пытался создавать «глобальные» переменные — например, lat_g — с правильными значениями и ссылаться на них, используя this.lat_g , lat_g и ряд других синтаксисов, но я просто не могу заставить компилятор понять ссылку на переменную состояния из render .

 export default class App extends React.Component {

  state = { //state set
    locationResult: null, //location result holds either location object converted to string or error message as string 
    locationStatus: null, //holds success status of location grab
    initLat_s: null, //holds initial latitude and longitude of user location
    initLon_s: null
  }; 
  
  componentDidMount() {this._getLocationAsync();} //if component mounts, run location grabber
    
  _getLocationAsync = async () => { //location grabber
    let { status } = await Permissions.askAsync(Permissions.LOCATION); //ask for location perms
    if (status !== "granted") { //if location perms denied, set locationResult accordingly
      this.setState({locationResult: "Permission to access location was denied"});
      this.setState({locationStatus: false});
    } else {
      let initLocation = await Location.getCurrentPositionAsync({}); //otherwise, save location object in "location" var
      this.setState({locationResult: JSON.stringify(initLocation)}); //set locationResult to string representation of location
      this.setState({locationStatus: true});

      let {initLat, initLon} = initLocation.coords; //gather lat/lon from location object
      this.setState({initLat_s: initLat}); //set lat/lon in state accordingly
      this.setState({initLon_s: initLon});
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView 
          style={styles.mapStyle}
          initialRegion={{
            latitude: -30,     //RIGHT HERE
            longitude: 120,    //RIGHT HERE
            latitudeDelta: .01,
            longitudeDelta: .01 
          }}
        />
      </View>
    );
  }
}
 

Вы можете попробовать этот подход.

 constructor(props) {
    super(props);
    this.state = {
      locationResult: null, //location result holds either location object converted to string or error message as string 
    locationStatus: null, //holds success status of location grab
    initLat_s: null, //holds initial latitude and longitude of user location
    initLon_s: null
    }
  } 

попробуйте это, и это сработает с вами.

     // Initial state shouldn't be a **null** because initialRegion.latitude and 
   // initialRegion.longitude are marked as required
    
        state = {
            initLat_s: -30, 
            initLon_s: 120,
          };
        <MapView
                  initialRegion={{
                    latitude: this.state.initLat_s, // Without {}
                    longitude: this.state.initLon_s, // Without {}
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01,
                  }}
                />