本文介绍了警告:无法在卸载的组件上调用setState(或forceUpdate)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
每次登录时都会收到此警告,
I am getting this warning every time I sign in,
这是我的代码:
authpage.js
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)
使用 withRouter
所以我可以访问用于导航的道具 this.props.history.push('/ dashboard')
如果我没有使用withRouter我无法访问this.props
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>
)
我认为问题在于我的withRouter,
如何在不使用withRouter的情况下访问this.props?
I think the problem is with my withRouter,how can we access this.props without using withRouter ?
推荐答案
它是异步所以
this.setState({
loginData : data,
userData : data,
email:"",
password:""
})
make error
您可以使用 this._mount 检查组件是否已挂载
make errorYou 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:""
})
...
这篇关于警告:无法在卸载的组件上调用setState(或forceUpdate)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!