Question

每次登录时都会收到此警告，

警告：无法在卸载时调用setState（或forceUpdate）零件。这是一个无操作，但它表示你的内存泄漏应用。要修复，请取消所有订阅和异步任务在componentWillUnmount方法中。

这是我的代码：

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

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？

Answer 1

这是异步所以

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

犯错误您可以使用 this._mount 检查已安装或卸载的组件

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

Answer 2

您可以使用_isMount来重载setState函数：

componentWillUnmount() {
    this._isMount = false;
}

componentDidMount() {
    this._isMount = true;
}

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

Answer 3

我在使用this.setState({ any })时遇到了一些问题。

每次构建组件时，它都会调用一个使用Axios的函数，并且响应会产生一个this.setState({ any })。

我的问题解决如下：

在componentDidMount()函数中，我调用了另一个称为initialize()的函数，该函数以 async 的身份保留，通过它，我可以调用执行提取和this.setState({ any })的函数。

  componentDidMount() {
    this.initialize();
  }

  myFunction = async () => {
      const { data: any } = await AnyApi.fetchAny();
      this.setState({ any });
  }

  initialize = async () => {
    await this.myFunction();
  }

警告：无法在卸载的组件上调用setState（或forceUpdate）

3 个答案: