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

getting this warning everytime 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 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 didnt 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 ?

Answer1:

It's async so

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

make error You can use <strong>this._mount</strong> 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:"" }) ...

Answer2:

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

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:Warning: Can't call setState (or forceUpdate) on an unmounted component