onReady issue

[14076156deiefyp]

I don't know why if I want to set variables in onReady, it will goes to an infinity loop, however if I just use console.log, it is alright, here is the code. The code should not affected the origin and destinaiton.

    <MapViewDirections
        origin={{latitude:this.state.startLatitude,longitude:this.state.startLongitude}}
        destination={{latitude:this.state.endLatitude,longitude:this.state.endLongitude}}
        mode='driving'
        language='en'
        strokeWidth={4}
        strokeColor="black"
        onReady={(result) => {
             //this.setDistance(result.distance,result.duration_in_traffic)
         }}
        onError={(errorMessage) => {
            //console.log(errorMessage);
          }}
    />

setDistance(distance,duration_in_traffic){
    this.setState({distance:parseFloat(distance),durationInTraffic:parseInt(duration_in_traffic)});
}

[bramus]

You have a binding: setDistance is not bound to your class instance, so this.setState() won't work there (as it there is no this in it).

Use one of these 5 suggested approaches to solve it. My preference goes out to number 5 “Arrow Function in Class Property“:

class Example extends React.Component {

  // By using an Arrow Function, the function will be bound to the execution context from which it is called (“lexical this”)
  setDistance = (distance,duration_in_traffic) => {
    this.setState({distance:parseFloat(distance),durationInTraffic:parseInt(duration_in_traffic)});
  }

  render() { 
    // ...
  }
}

See Javascript ES6 — Arrow Functions and Lexical this for more info.

[14076156deiefyp]

I have tried and it should not be related to this issue since it can successfully execute the code inside setDistance, but somehow it will drive onReady to infinity loop when I call the function or this.setState().

[bramus]

Ok, think I see it now: setState() will trigger a re-render, thus re-rendering MapViewDirections. Normally a re-render with the same data won't happen, but I'll look further into it to be sure …

[sidious18]

The problem is in this line:

if ((nextProps.origin != this.props.origin) || (nextProps.destination != this.props.destination) || !isEqual(nextProps.waypoints, this.props.waypoints)) {

You should not compare arrays in JS directly, because two arrays are always not equal. You should compare route values. Use isEqual instead of !== to fix this issue.

[bramus]

Good point @sidious18. Working and testing a fix right now.

[bramus]

It took a bit longer than expected, but couldn't trigger this one myself at first. The “culprit” was the fact that I used an array holding all coordinates in my state. This then resulted in the fact that the references remained the same all the time, even after a re-render.

In contrast: the example above creates a new object on every render. Even though react-native-maps-directions can now catch this, I'd advise against this use.

Thanks to all involved for their input :)