0
67
ViewsNo se puede actualizar un componente mientras se representa una advertencia de componente diferente
Recibo esta advertencia en reaccionar:
index.js:1 Warning: Cannot update a component (`ConnectFunction`) while rendering a different component (`Register`). To locate the bad setState() call inside `Register`Fui a las ubicaciones indicadas en el seguimiento de la pila y eliminé todos los estados establecidos, pero la advertencia aún persiste. ¿Es posible que esto pueda ocurrir desde el envío de redux?
mi código:
registro.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 );función que activa la advertencia en mi componente registerForm llamado por 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() } } }seguimiento de pila:
3 answers
Answer question0
Esta advertencia se introdujo desde React V16.3.0.
Si está utilizando componentes funcionales, puede envolver la llamada setState en useEffect.
Código que no funciona:
const HomePage = (props) => { props.setAuthenticated(true); const handleChange = (e) => { props.setSearchTerm(e.target.value.toLowerCase()); }; return ( <div key={props.restInfo.storeId} className="container-fluid"> <ProductList searchResults={props.searchResults} /> </div> ); };Ahora puedes cambiarlo a:
const HomePage = (props) => { // trigger on component mount useEffect(() => { props.setAuthenticated(true); }, []); const handleChange = (e) => { props.setSearchTerm(e.target.value.toLowerCase()); }; return ( <div key={props.restInfo.storeId} className="container-fluid"> <ProductList searchResults={props.searchResults} /> </div> ); };0
Solo vine aquí porque tuve este problema y me tomó un poco de investigación antes de darme cuenta de lo que había hecho mal: simplemente no estaba prestando atención a cómo estaba escribiendo mi componente funcional.
Pensé en dejar una respuesta aquí en caso de que alguien viniera a buscar, y cometieron el mismo error simple que yo cometí.
estaba haciendo esto:
const LiveMatches = (props: LiveMatchesProps) => { const { dateMatches, draftingConfig, sportId, getDateMatches, } = props; if (!dateMatches) { const date = new Date(); getDateMatches({ sportId, date }); }; return (<div>{component stuff here..}</div>); }; Me había olvidado de usar useEffect antes de enviar mi llamada redux de getDateMatches()
Tan estúpido y algo que había estado haciendo en todos los demás componentes, jaja.
Entonces debería haber sido:
const LiveMatches = (props: LiveMatchesProps) => { const { dateMatches, draftingConfig, sportId, getDateMatches, } = props; useEffect(() => { if (!dateMatches) { const date = new Date(); getDateMatches({ sportId, date }); } }, [dateMatches, getDateMatches, sportId]); return (<div>{component stuff here..}</div>); };Error simple y tonto, pero tomó un tiempo darse cuenta, así que espero que esto ayude a alguien más con este problema.
0
Solucioné este problema eliminando el envío del método de renderizado de componentes de registro al método de desmontaje del componente. Esto se debe a que quería que esta lógica ocurriera justo antes de redirigir a la página de inicio de sesión. En general, es una buena práctica poner toda su lógica fuera del método de renderizado, por lo que mi código estaba mal escrito antes. Espero que esto ayude a alguien más en el futuro :)
Mi componente de registro refactorizado:
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> ); } }