Make setState() to change state variables for whole class

Question

I have the code as below which changes the values of cords inside the state if the device location is available.

class App extends Component{
  state={
    cords:{
      longitude:24.01,
      latitude:38.22
    },
    data:{}
  }
  componentDidMount() {
    console.log("Mounted")
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position=>{
      let newCords={
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.setState({cords:newCords});
      console.log("Inside",this.state);//displays new values
    });
    };
    console.log(this.state);// displays old values

The change in state() can be observed only inside the arrow function. How to get the changed values outside the whole if-block?

this answer might help you https://stackoverflow.com/a/30783011/8240417 — Arif, Jul 06 '20 at 05:26
It immediately called the console. Try to add `setTimeout`. Instead, you should use the callback function of `setState`. — Alok Mali, Jul 06 '20 at 05:26

Raghvender Kataria · Accepted Answer · 2020-07-06T06:15:04.823

Since setState is async, so, you will get the updated values inside callback function of state only i.e. arrow function of state in this case. Since navigator.geolocation.getCurrentPosition is an async function, that even does not returns Promise. So, once you execute this, the code further moves on to execute further lines of code, but by this time the response of navigator.geolocation.getCurrentPosition has not come, and since this time the state and cords are also not set. So, you will never be getting the coords value outside that if statement, until your API call navigator.geolocation.getCurrentPosition succeeds. Once that gets success, than the code that you have written inside its call back i.e. written below executes.

let newCords={
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.setState({cords:newCords});
      console.log("Inside",this.state);//displays new values

So, this is how your code is working. Probably, you need to change your logic. Since navigator.geolocation.getCurrentPosition is also not returning promise so, you can't await also. Although, its not recommended, but you can setTimeOut for sometime blindly, by the time response comes like below

 componentDidMount() {
    console.log("Mounted")
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position=>{
      let newCords={
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
      this.setState({cords:newCords});
      console.log("Inside",this.state);//displays new values
    });
    };
    setTimeout(() => {
      console.log(this.state);
    }, 3000);

It is the same thing, it will now say 'newCords' not defined. @raghvender-kataria — Bimarsha Khanal, Jul 06 '20 at 05:32
Please decalre it the same way, i.e. outside if statement, as I have done in 3rd line. If the value is assigned to it inside if, then for sure you will get the values of it outside if, since you have decalred the variable outside if — Raghvender Kataria, Jul 06 '20 at 05:34
I had tried this, in this case it says 'cords' is undefined. — Bimarsha Khanal, Jul 06 '20 at 05:40
I have given the reasoning that how its actually working. Please go through the updated answer — Raghvender Kataria, Jul 06 '20 at 06:15
This method works. But it would be more effective if the function navigator.geolocation.getCurrentPosition can be made synchronous. — Bimarsha Khanal, Jul 06 '20 at 08:01
I believe you can check this out. https://stackoverflow.com/a/56636911/10720296 — Raghvender Kataria, Jul 06 '20 at 08:03

score 0 · Answer 2 · answered Jul 06 '20 at 06:02

I think @Anarno's answer is correct. I don't know why is it downvoted. The function from navigator is async and before it mutates the state, you are trying to log the state outside the if, it will give you the old value for sure and I am not able to relate what is the logging for, you will get the state value updated. Use React-tools instead of console loggers to see how your state changes.

Pavan Kalyan · Answer 3 · 2020-07-06T08:42:49.073

0

you can use temp variables to get the values outside the if block it can be used in following way

componentDidMount() {
let temp={}
console.log("Mounted")
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position=>{
  let newCords={
    latitude: position.coords.latitude,
    longitude: position.coords.longitude
  }
temp=newCords;
  this.setState({cords:newCords});
  console.log("Inside",this.state);//displays new values
});
};
console.log(this.state);
console.log('temp variable having new data',temp)
}

edited Jul 06 '20 at 08:42

answered Jul 06 '20 at 06:34

Pavan Kalyan

377
1
10

This is same as using 'let newCords' to declare it before if-block. It says 'temp' as undefined. – Bimarsha Khanal Jul 06 '20 at 07:48

Make setState() to change state variables for whole class

3 Answers3