How to setStates before api Call in React

Question

I have a little problem with my app (made with react-native), when a user open the app i have the method componentDidMount which reload the state of latitutde and longitude by using this.setState.

After that i have a function that send the lat and long to my action. But when a user is connecting the time between the setState and the function call is pretty short, so my first API call render undefined because the state is not up to date before the API call. I don't know where to put my function to be called after the update of the state.

   componentWillMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          lat: position.coords.latitude,
          long: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
    setTimeout(() => {
        const {lat, long} = this.state
        console.log(lat)
        this.props.getConditions(lat, long)
    }, 1000)
}

even with the setTimeout the console.log return null (corresponding to my initial state)

Thanks for your help

score 3 · Answer 1 · answered Jan 23 '18 at 17:02

componentWillMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          lat: position.coords.latitude,
          long: position.coords.longitude,
          error: null,
        }, () => {
          this.props.getConditions(lat, long)
       });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
}

This should solve your problem , passing a callback to setstate run the callback after the state is updated is done. setState is asynchronous.

score 0 · Answer 2 · answered Jan 23 '18 at 17:27

0

In general setState works in an asynchronous way. Which means after calling setState this.state variable is not immediately changed. So if you want to perform an action immediately after setting state on a state variable and then return a result, a callback will be useful.

navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          lat: position.coords.latitude,
          long: position.coords.longitude,
          error: null,
        }, () => {
          this.props.getConditions(lat, long)
       });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );

Read more about when to use setState callback.

answered Jan 23 '18 at 17:27

cauchy

1,123
1
9
19

Thanks for your answer, it works like a charm. I have another problem is that when i use fetch it retunr 2 empty array and then an array with my json data from the API. I don't know why the API is calling twice with empty data.. Do you have any solution ? with console.log() i see : Array[] Array[] Array[my data] – user1310969 Jan 23 '18 at 21:48
Can you give me link of jsfiddle showing where you are making any API call.Also if my answer helped please upvote and accept the answer. – cauchy Jan 24 '18 at 04:47
@user1310969 that's great. Please upvote and accept the answer if I helped. – cauchy Jan 25 '18 at 14:42

How to setStates before api Call in React

2 Answers2