ReactJS lifecycle methods not working in sequence

Question

I am working on Google Maps rendering in ReactJS. For that, I am using 'react-google-maps' library. The logical flow is; at the page load, get the user's location and plot them on the map. A user is provided with navigation links to hit different URL. To handle the navigation, I am using React router. The user's location is identified in componentWillMount() then the state is set accordingly and the map is rendered in render(). The problem is that render() gets called before completing componentWillMount(), it gets the null values and it fails. This situation only occurs in client-side routing and not in server-side rendering.

To restrict the way of execution, I made the componentWillMount() as an async method where it waits until the user's location is determined. Still, it was not helpful.

state = {
        homeLocation: {},
        coordinates: []
    }

async componentWillMount(props) {
        const { lat,lng } = await this.getcurrentLocation();
        this.setState({
            homeLocation:{
                lat: lat, 
                lng: lng
            }
        })
    }

getcurrentLocation() {

        if (window.navigator && window.navigator.geolocation) {
          return new Promise((resolve, reject) => {
            window.navigator.geolocation.getCurrentPosition(pos => {
              const coords = pos.coords;
              resolve({
                lat: coords.latitude,
                lng: coords.longitude
              });
            });
          });
        }
        return {
          lat: 0,
          lng: 0
        };
      }
render(){

   <MapWithAMarker
   // necessary parameters
  />
}

//Routers
const AppRouter = () => (
    <Router>
        <div>
            <Switch>
                <Route path="/" component={MapHomeLocation} exact={true}/>
                <Route path="/location/:locationType" component={MapSelectedLocation}/>
                <Route component={Notfound}/>
            </Switch>
        </div>

    </Router>
);


The expected result is that coordinates should be determined first then render() should get called. In server-side routing(i.e. using anchor tags instead of <Link>) it works as expected.

Vardan Gupta · Answer 1 · 2019-03-23T09:43:17.610

Call the getcurrentLocation() in the state itself.

state = {
        homeLocation: this.getcurrentLocation(),
        coordinates: []
    }



getcurrentLocation() {

        if (window.navigator && window.navigator.geolocation) {
          return new Promise((resolve, reject) => {
            window.navigator.geolocation.getCurrentPosition(pos => {
              const coords = pos.coords;
              resolve({
                lat: coords.latitude,
                lng: coords.longitude
              });
            });
          });
        }
        return {
          lat: 0,
          lng: 0
        };
      }
render(){

   <MapWithAMarker
   // necessary parameters
  />
}

//Routers
const AppRouter = () => (
    <Router>
        <div>
            <Switch>
                <Route path="/" component={MapHomeLocation} exact={true}/>
                <Route path="/location/:locationType" component={MapSelectedLocation}/>
                <Route component={Notfound}/>
            </Switch>
        </div>

    </Router>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

If you don't mind asking the code snippet to set the values in state. Since getcurrentLocation() returns two values, how can I assign them to homeLocation object in state. — Swapnil, Mar 23 '19 at 07:24

score 1 · Accepted Answer · answered Mar 23 '19 at 07:21

1

you should check like that if data is there in that then only give value.

if data && data.length > 0 ? data : null

answered Mar 23 '19 at 07:21

Mehul Jariwala

886
1
9
19

Can you please explain to me where I can put this condition? I am new to ReactJS concepts. Your comment will be helpful. – Swapnil Mar 23 '19 at 07:23
because when you doing and fetch some data for api then first time its get null so that we need to check and put condition inside if data is null then don't assign if data is not null then assign @Swapnil – Mehul Jariwala Mar 23 '19 at 07:24
remove async and await in componentwilmount method – Mehul Jariwala Mar 23 '19 at 07:27
put getcurrentLocation() inside the component will mount – Mehul Jariwala Mar 23 '19 at 07:28
if you want more help then we can connet in anydesk i wil help you. – Mehul Jariwala Mar 23 '19 at 07:28
I tried a similar solution earlier in render() method. But I got an error saying, maximum update depth exceeded. My solution was, if the data is null then use setState. But it did not work. Can you share the code snippet, I will figure it out. – Swapnil Mar 23 '19 at 07:29
Can you provide me anydesk address. I can connect you – Swapnil Mar 23 '19 at 07:31
anydesk 529 414 519 – Mehul Jariwala Mar 23 '19 at 07:34
give me your id i am available to help you @Swapnil – Mehul Jariwala Mar 23 '19 at 08:29
Thanks Mehul for me helping me out! – Swapnil Mar 23 '19 at 10:41

score 1 · Answer 3 · edited Mar 23 '19 at 16:29

1

Never do fetching operations in componentWillMount(), instead use componentDidMount() since calling setState() would re-render the component, you probably will see new data appears on your map.

edited Mar 23 '19 at 16:29

DarkSuniuM

2,523
2
26
43

answered Mar 23 '19 at 07:43

Kianoosh

56
1
8

what behavior ? – Kianoosh Mar 23 '19 at 08:35
Getting null coordinates in the render method. With componentWillMount(), it gets coordinates sometimes. – Swapnil Mar 23 '19 at 08:38

ReactJS lifecycle methods not working in sequence

3 Answers3