我收到这个警告的反应:
index.js:1 Warning: Cannot update a component (`ConnectFunction`) while rendering a different component (`Register`). To locate the bad setState() call inside `Register`
我去了堆栈跟踪中指示的位置并删除了所有设置状态,但警告仍然存在。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 );
在 register.js 调用的我的 registerForm 组件中触发警告的函数
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() } } }
堆栈跟踪:
我通过删除从注册组件渲染方法到 componentwillunmount 方法的调度解决了这个问题。这是因为我希望这个逻辑在重定向到登录页面之前发生。一般来说,最好将所有逻辑放在渲染方法之外,这样我的代码之前就写得不好。希望这对将来的其他人有所帮助:)
我重构的寄存器组件:
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> ); } }