State returning NULL in React

Question

I have a simple component in which I'm trying to pass my current latitude and longitude into MapView.

If I log out lastPosition I get the following:

{
  "coords": {
    "speed": -1,
    "longitude": -122.239853,
    "latitude": 37.235444,
    "accuracy": 5,
    "heading": -1,
    "altitude": 0,
    "altitudeAccuracy": -1
  },
  "timestamp" 235436345433454
}

So I know it's working, but why does it say null when it hits MapView in my render function?

export default class Map extends Component {
  constructor (props) {
    super (props)
    this.state = {
      initialPosition: {
        coords: {
          longitude: 0,
          latitude: 0
        }
      },
      lastPosition: null,
      error: null
    }
  }

  watchID: ?number = null

  componentDidMount () {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        var initialPosition = JSON.stringify(position)
        this.setState({initialPosition})
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    )
    this.watchID = navigator.geolocation.watchPosition(
      (position) => {
        var lastPosition = JSON.stringify(position)
        this.setState({lastPosition})
      }
    )
  }

  componentWillUnmount () {
    navigator.geolocation.clearWatch(this.watchID)
  }

  render () {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: this.state.lastPosition.coords.latitude,
            longitude: this.state.lastPosition.coords.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
    );
  }
}

Chris · Accepted Answer · 2017-05-20 18:42:46Z

1

The first time you render this.state.lastPosition is null and all hell breaks lose. An exception is thrown and react breaks. You only set the lastPosition to correct data once it arrives.

You need to put a check at the point you are trying to get coords.

<MapView
          style={styles.map}
          initialRegion={{
            latitude: this.state.lastPosition ?
 this.state.lastPosition.coords.latitude : 0,
            longitude: this.state.lastPosition ?
 this.state.lastPosition.coords.longitude : 0,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />

You probably want to show a loader while you get the data and not set it to zero. But I hope you get the point.

edited May 20, 2017 at 18:42

Chris

59.7k20 gold badges121 silver badges144 bronze badges

answered May 20, 2017 at 18:38

Mukesh Soni

6,6683 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

itsclarke Over a year ago

I'm stilling getting the error: undefined is not an object (evaluating 'this.state.lastPosition.coords.latitude')

Mukesh Soni Over a year ago

As Avi said in his answer, do you want to store the string of the json returned (you use JSON.stringify)? Just set it to position

itsclarke Over a year ago

I've removed JSON.stringify() and the map shows, but it's using 0 for the latitude and longitude.

Mukesh Soni Over a year ago

The only reason can be that lastPosition did not get set to an object in navigator.geolocation.watchPosition callback. You need to debug from here on.

Avi K. · Accepted Answer · 2017-05-20 18:46:03Z

0

You are using JSON.stringify(position) which converts the object to a string and then you store it in the state as a string.

Are you sure that this is what you wanted to do? Because that explains why coords is undefined.

answered May 20, 2017 at 18:46

Avi K.

1,8022 gold badges19 silver badges29 bronze badges

Collectives™ on Stack Overflow

State returning NULL in React

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related