呈现不同组件警告时无法更新组件 [英] Cannot update a component while rendering a different component warning

问题描述

我在反应中收到此警告:

index.js:1 警告:无法更新组件 (`ConnectFunction`)在渲染不同的组件时(`Register`).要找到`Register` 中的错误 setState() 调用

我去了堆栈跟踪中指示的位置并删除了所有设置状态，但警告仍然存在.redux dispatch 是否有可能发生这种情况?

我的代码:

注册.js

class 注册扩展组件 {使成为() {if( this.props.registerStatus === 成功) {//重置注册状态以允许返回注册页面this.props.dispatch( resetRegisterStatus()) # 根据堆栈跟踪，这是导致错误的行return <Redirect push to = {HOME}/>}返回 (<div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}><注册表格/>

);}}函数 mapStateToProps( 状态 ) {返回 {registerStatus: state.userReducer.registerStatus}}导出默认连接( mapStateToProps )(注册)；

在 register.js 调用的 registerForm 组件中触发警告的函数

handleSubmit = async() =>{if( this.isValidForm() ) {常量详细信息 = {用户名":this.state.username，密码":this.state.password，电子邮件":this.state.email，清除":this.state.clearance}等待 this.props.dispatch( register(details) )if( this.props.registerStatus !== 成功 && this.mounted ) {this.setState( {errorMsg: this.props.registerError})this.handleShowError()}}别的 {如果(this.mounted){this.setState( {errorMsg: "错误 - 注册凭据无效！"} )this.handleShowError()}}}

堆栈跟踪:

解决方案

我解决了这个问题，方法是从 register 组件的 render 方法中移除了对 componentwillunmount 方法的调度.这是因为我希望这个逻辑在重定向到登录页面之前发生.一般来说，最好的做法是将所有逻辑都放在 render 方法之外，这样我的代码以前写得不好.希望这对未来的其他人有所帮助:)

我重构的注册组件:

class 注册扩展组件 {componentWillUnmount() {//重置注册状态以允许返回注册页面if ( this.props.registerStatus !== "" ) this.props.dispatch( resetRegisterStatus() )}使成为() {if( this.props.registerStatus === 成功 ) {return <重定向推送到 = {LOGIN}/>}返回 (<div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}><注册表格/>

);}}

I am getting this warning in react:

index.js:1 Warning: Cannot update a component (`ConnectFunction`) 
while rendering a different component (`Register`). To locate the 
bad setState() call inside `Register` 

I went to the locations indicated in the stack trace and removed all setstates but the warning still persists. Is it possible this could occur from redux dispatch?

my code:

register.js

class Register extends Component {
  render() {
    if( this.props.registerStatus === SUCCESS) { 
      // Reset register status to allow return to register page
      this.props.dispatch( resetRegisterStatus())  # THIS IS THE LINE THAT CAUSES THE ERROR ACCORDING TO THE STACK TRACE
      return <Redirect push to = {HOME}/>
    }
    return (
      <div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}>
        <RegistrationForm/>
      </div>
    );
  }
}

function mapStateToProps( state ) {
  return {
    registerStatus: state.userReducer.registerStatus
  }
}

export default connect ( mapStateToProps ) ( Register );

function which triggers the warning in my registerForm component called by register.js

handleSubmit = async () => {
    if( this.isValidForm() ) { 
      const details = {
        "username": this.state.username,
        "password": this.state.password,
        "email": this.state.email,
        "clearance": this.state.clearance
      }
      await this.props.dispatch( register(details) )
      if( this.props.registerStatus !== SUCCESS && this.mounted ) {
        this.setState( {errorMsg: this.props.registerError})
        this.handleShowError()
      }
    }
    else {
      if( this.mounted ) {
        this.setState( {errorMsg: "Error - registration credentials are invalid!"} )
        this.handleShowError()
      }
    }
  }

Stacktrace:

解决方案

I fixed this issue by removing the dispatch from the register components render method to the componentwillunmount method. This is because I wanted this logic to occur right before redirecting to the login page. In general it's best practice to put all your logic outside the render method so my code was just poorly written before. Hope this helps anyone else in future :)

My refactored register component:

class Register extends Component {

  componentWillUnmount() {
    // Reset register status to allow return to register page
    if ( this.props.registerStatus !== "" ) this.props.dispatch( resetRegisterStatus() )
  }

  render() {
    if( this.props.registerStatus === SUCCESS ) { 
      return <Redirect push to = {LOGIN}/>
    }
    return (
      <div style = {{paddingTop: "180px", background: 'radial-gradient(circle, rgba(106,103,103,1) 0%, rgba(36,36,36,1) 100%)', height: "100vh"}}>
        <RegistrationForm/>
      </div>
    );
  }
}

这篇关于呈现不同组件警告时无法更新组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！