React updating component when params change with old state - reactjs

Question

i'm rendering some router links with params that contain the the same url but different id params. The router view updates but the state is always behind 1.
here's my Router setup:
<Router>
<div>
<h1>HEY THERE</h1>
<Link to={'/'}>Home</Link>
<Link to={'/detail/13721'}>Show Number 1 </Link>
<Link to={'/detail/1228'}>Show Number 2</Link>
</div>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/detail/:id" component={DetailPage} />
</Switch>
</Router>
Here's my detail page setup:
import React, { Component } from 'react'
class DetailPage extends React.Component {
constructor(props){
super(props);
this.state ={
showid: '30318',
showurl: 'http://localhost/podcast/podcastsbyid/?id=',
shows: []
}
}
render() {
return ( <div>
<h1>Detail Page</h1><p>{this.state.showid}</p>
{this.state.shows.map((show, i) => {
return <div key={i}>{show.title}</div>
})}
</div>
)
}
getShow(){
fetch(this.state.showurl + this.state.showid).then(res => res.json()).then(data => {
this.setState({shows: []})
this.setState({shows: this.state.shows.concat(data.items)})
})
}
componentWillReceiveProps(newProps){
if(this.state.showid == newProps.match.params.id){
console.log('they are the same')
}
else{
console.log('they are different')
this.setState({showid: newProps.match.params.id})
this.getShow()
}
}
}
export default DetailPage;
any help would be appreciated!!

Answer 1

The problem seems to be state update being asynchronous. Try updating the code as shown below:
componentWillReceiveProps(newProps){
if(this.state.showid == newProps.match.params.id){
console.log('they are the same')
}
else{
console.log('they are different')
this.setState({showid: newProps.match.params.id}, this.getShow)
// use it as callback ------------------------------^
}
}