Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Here is my code:

authpage.js

 handleLoginSubmit = (e) => {
    e.preventDefault()
    let { email,password } = this.state
    const data = {
      email : email,
      password : password
    fetch('http://localhost:3001/auth/login',{
      method : 'post',
      body : JSON.stringify(data),
      headers : {
        "Content-Type":"application/json"
    }).then(res => res.json())
    .then(data => {
      if(data.success){
        sessionStorage.setItem('userid',data.user.id)
        sessionStorage.setItem('email',data.user.email)
      this.setState({loginData : data,
                     userData : data,
                     email:"",
                     password:""})
      if(data.token) {
        Auth.authenticateUser(data.token)
        this.props.history.push('/dashboard')
      this.handleLoginMessage()
      this.isUserAuthenticated()
export default withRouter(AuthPage)
use withRouter so I can access props which I use to navigate this.props.history.push('/dashboard')
if I didn't use withRouter I cannot access this.props
index.js
const PrivateRoute = ({ component : Component, ...rest }) => {
  return (
    <Route {...rest} render = { props => (
    Auth.isUserAuthenticated() ? (
      <Component {...props} {...rest} />
    ) : (
      <Redirect to = {{
        pathname: '/',
        state: { from: props.location }
const PropsRoute = ({ component : Component, ...rest }) => (
  <Route {...rest} render = { props => (
    <Component {...props} {...rest} />
const Root = () => (
  <BrowserRouter>
    <Switch>
      <PropsRoute exact path = "/" component = { AuthPage } />
      <PrivateRoute path = "/dashboard" component = { DashboardPage } />
      <Route path = "/logout" component = { LogoutFunction } />
      <Route component = { () => <h1> Page Not Found </h1> } />
    </Switch>
  </BrowserRouter>
I think the problem is with my withRouter, 
how can we access this.props without using withRouter ?
I had some problems using this.setState({ any }).
Every time the component was built, it called a function that used Axios and the response made a this.setState({ any }).
My problem was solved as follows:
In the componentDidMount() function I call another function called initialize() that I left as async and through it I can call my function that performs fetch and this.setState({ any }).
  componentDidMount() {
    this.initialize();
  myFunction = async () => {
      const { data: any } = await AnyApi.fetchAny();
      this.setState({ any });
  initialize = async () => {
    await this.myFunction();
                I do not think this will work. There is no where in the code you are evaluating whether the component is mounted or not.
– Anjan Biswas
                Aug 7, 2018 at 1:52
                The problem is to call someone asynchronous by componentDidMount (), I fixed calling another function that is async. But if it still does not solve, I suggest using Redux.
– Thiago Marcello
                Aug 8, 2018 at 2:18
                This may not be entirely solvable by Redux. There is a lengthy thread on Github where people are discussing potential solutions. I don't have the link to it right now but I will post it here when I post it.
– Anjan Biswas
                Aug 8, 2018 at 4:46
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.