error with nested route ( react-router )

Question

I have an issue with setState().

Here is my routes.tsx file

export const Routes = (props:any) => (
<Router {...props}>
<Route path="/" component={Miramir}>
  <Route path="/profile">
    <IndexRoute component={Profile} />
    <Route path="/profile/update" component={ProfileUpdate} />
  </Route>
</Route>

So, when i trying to use /profile/update route I have an warning and see that component which only for /profile route exists on /profile/update

This is an error

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the CountDown component.

Component CountDown

componentDidMount = () => {
    let timeLeft = this.secondsToTime(this.state.date);
    this.setState({time: timeLeft});
  }

_countDown = () => {
    this.setState({
      time: this.secondsToTime(this.state.date)
    })
  }

Calling _countDown every sec

Hope your help!

Thanks

Answer 1

You probably call _countDown() via setInterval() I'd imagine. Did you clear that Interval in componentWillUnmount() ?

Answer 2

you can not call the _countDown before the component mount (it means the component render method is already called and then you calling _countDown function).

calling _countDown inside setInterval may solve, but may fail again if you render method take more time than time provided in setInterval.

_countDown = () => {
    this.setState({
      time: this.secondsToTime(this.state.date)
    })
  }