I saw lots of similar questions on StackOverflow, but the suggested solutions did not work for me. It's also possible that I did not know how to best apply it, as I am new to React. A MCVE of my code is as below:
export default class ClDashboard extends Component {
constructor(props) {
super(props)
this.state = {
start: this.props.location.query.start,
end: this.props.location.query.end,
period: this.props.location.query.period,
autoRotate: false
}
}
componentWillMount() {
this.setState(this.newProps(this.props))
}
componentDidMount() {
if (this.state.autoRotate) {
let nextID = this.getNextID(this.props.route.clientInfo.farms)
let [startDate, endDate] = this.getAutoRotateDates()
let timeQuery = '/?start=' + startDate + '&end=' + endDate
let farmChange = this.farmChange.bind(this)
let farmChangeHandle = () => {
if (this.state.autoRotate) {
farmChange(nextID, timeQuery)
}
}
setTimeout(farmChangeHandle, 3000)
}
}
farmChange = (ID, timeQuery) => {
browserHistory.push(this.state.url + ID + timeQuery)
}
Essentially what happens is, I am trying to rotate between a set of IDs (getNextID()
gets the next ID in sequence) if a certain flag autoRotate
is set to true. However, though the URL changes to the next ID, the page does not reflect the changes.
I tried the following things:
- I don't think the solution from here is applicable to my case, but if it is, would like to know how.
- My version of react-router is 3.0.5 so solutions like these for v4 would not work
- Tried adding componentWillReceiveProps()
like suggested here but that did not help either.
One strange thing is that if I copy everything within if (this.state.autoRotateFarms)
to componentWillReceiveProps()
, then it works, but it seems to redirect the page back to the next ID in the sequence even after you navigate away.
How can I go about fixing this?