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

I don'*t know if this solves your problem but nromally, paths are relative to the parent Route. so the route with path /profile/update is actually available at /profile/profile/update — Michael Ritter
– Michael Ritter, Commented Jan 20, 2017 at 12:10
Actually routes starting with / should be relative to the root, so my initial comment was wrong. But i always define my paths without starting / so they are relative and still work after changing a parent's path — Michael Ritter
– Michael Ritter, Commented Jan 20, 2017 at 12:18
Can you update the question to give more informations about your CountDown component? Where do you call setState()? — Michael Ritter
– Michael Ritter, Commented Jan 20, 2017 at 12:24

Michael Ritter · Accepted Answer · 2017-01-20 12:51:41Z

2

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

answered Jan 20, 2017 at 12:51

Michael Ritter

6404 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khalid Azam · Accepted Answer · 2017-01-23 02:16:44Z

0

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)
    })
  }

answered Jan 23, 2017 at 2:16

Khalid Azam

1,64119 silver badges17 bronze badges

Collectives™ on Stack Overflow

error with nested route ( react-router )

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related