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?