Warning: Can't call setState (or forceUpdate) on an unmounted component

Question

I am getting this warning every time I sign in,

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 ?

score 10 · Answer 1 · edited May 24 '18 at 08:28

10

It's async so

this.setState({
   loginData : data,
   userData : data,
   email:"",
   password:""
})

make error You can use this._mount to check component is mounted or unmount

componentDidMount () {
   this._mounted = true
}
componentWillUnmount () {
   this._mounted = false
}
...
if(this._mounted) {
    this.setState({
        loginData : data,
        userData : data,
        email:"",
        password:""
})
...

edited May 24 '18 at 08:28

Ihor Lavs

2,315
2
15
26

answered May 24 '18 at 08:15

nguyen nani

125
7

@tonychen this may answer your question: https://stackoverflow.com/questions/50029468/react-warning-about-setstate-in-unmounted-component# – ahlusar1989 Jun 01 '18 at 21:00

score 2 · Answer 2 · answered Oct 24 '18 at 08:34

You can use _isMount with overloading the setState function:

componentWillUnmount() {
    this._isMount = false;
}

componentDidMount() {
    this._isMount = true;
}

setState(params) {
    if (this._isMount) {
        super.setState(params);
    }
}

score 1 · Answer 3 · answered Jul 31 '18 at 02:59

1

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

answered Jul 31 '18 at 02:59

Thiago Marcello

343
2
10

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 07 '18 at 01: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 08 '18 at 02: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 08 '18 at 04:46
Ok. I'll wait. Thank you! – Thiago Marcello Aug 08 '18 at 17:28

Warning: Can't call setState (or forceUpdate) on an unmounted component

3 Answers3

Linked