我收到了以下警告:

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

我go 了堆栈跟踪中指示的位置,删除了所有设置状态,但警告仍然存在.这是否可能发生在redux调度中?

我的代码:

登记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 登记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:

Stacktrace

推荐答案

我修复了这个问题,将register components render方法中的dispatch移除到component willunmount方法中.这是因为我希望这个逻辑在重定向到登录页面之前发生.一般来说,最好的做法是将所有逻辑放在render方法之外,这样我的代码以前就写得不好.希望这对以后的其他人有所帮助:)

我的重构寄存器组件:

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

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时,它在严格模式下触发两次

为什么我无法访问窗口事件处理程序中的状态?

父组件更新后不重新呈现子组件

在下一个js中使用ESTAccountWithEmailAndPassword函数时循环

React Router:在没有手动页面刷新的情况下,路由不会更新内容

在React中映射对象数组时,如何正确呈现JSX.Element或React.ReactNode类型?

Gitlab CI和VITE环境变量出现问题

有没有比;KeyableShell;组成部分

React 无效的钩子调用:如何避免嵌套钩子?

Spring Boot + React + MySQL应用的架构层面有哪些?

Firebase查询返回随机用户数据,而不是过滤后的用户数据

如何在使用 React Router v6 将当前页面的状态传递给上一页的同时导航到上一页?

在 reactJS 中导航时页面重新加载

为什么 createSlice 中的 reducer 不能以不同的方式改变状态?

React Native Realm 应用程序在发布构建后崩溃

使用 React Router v6 监听来自不同组件的组件状态变化

Select 建议后如何关闭 vscode 添加自动完成={}

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用?

Rtk 查询无效标签不使数据无效

调用函数以获取数据并在数据到达时导航到链接