Actualización del estado de react de Redux causando la actualización máxima en comparación con el error excedido
Soy bastante nuevo para React y Redux, y he quedado un poco atorado al mostrar el estado de error basado en una respuesta de error del servidor (utilizando express).
La mayoría de las otras cuestiones similares He investigado están relacionados con onClick, onSubmit, o onChange, pero no he visto uno como el mío.
Resultado previsto: El estado de error se recupera de la tienda y se muestra dentro del componente
La cuestión se deriva de este segmento:
if (nextProps.errors){
this.setState({ errors: nextProps.errors });
}
The full Login.js:
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import "../css/login.css";
import { loginUser } from "../../redux/actions/authActions";
import TextFieldGroup from "../common/textFieldGroup";
class Login extends Component {
constructor() {
super();
this.state = {
username: '',
password: '',
errors: {}
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
componentDidMount() {
if (this.props.auth.isAuthenticated) {
this.props.history.push('/dashboard');
}
}
componentDidUpdate(nextProps) {
if (nextProps.auth.isAuthenticated) {
this.props.history.push('/dashboard');
}
if (nextProps.errors){
this.setState({ errors: nextProps.errors });
}
}
onSubmit(e) {
e.preventDefault();
const userData = {
username: this.state.username,
password: this.state.password
};
this.props.loginUser(userData);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
render() {
const { errors } = this.state;
return (
Log In
);
}
}
Login.propTypes = {
loginUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
errors: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
export default connect(mapStateToProps, { loginUser })(Login);
He intentado:
- Asignar el valor a una variable temp, pero esto es extremadamente clunky y hace que el código confuso en mi opinión.
- Validando si es nulo/no nulo, naturalmente esto reforzó el bucle infinito o validado positivamente, ya que no era nulo, por lo que el estado de error nunca actualiza en la página.
Definitivamente estoy recibiendo la respuesta correcta del error del servidor como puedo verlo en las herramientas Redux dev.
Gracias por adelantado.
Pregunta hecha hace 3 años, 5 meses, 6 días - Por codemaestro
3 Respuestas:
-
Cambiar la condición de:
if (nextProps.errors)
a:
if (this.props.errors !== nextProps.errors)
Parece estar trabajando bien por ahora. Crédito a @emile-bergeron para la solución
Respondida el Dec 17, 2020 a las 15:12 - por geekguru
Votos positivos: 0 | Votos negativos: 0 -
El problema que estás experimentando se debe a que estás utilizando
componentDidUpdate
de manera incorrecta.componentDidUpdate
recibe dos parámetros:prevProps
yprevState
, nonextProps
.Por lo tanto, debes modificar tu método
componentDidUpdate
de la siguiente manera:jsx componentDidUpdate(prevProps, prevState) { if (this.props.auth.isAuthenticated) { this.props.history.push('/dashboard'); } if (this.props.errors !== prevProps.errors){ this.setState({ errors: this.props.errors }); } }
Al utilizar
prevProps.errors
en la condición, puedes comparar el estado actual de los errores con el estado anterior de los errores, y solo actualizar el estado si hay una diferencia.Con estos cambios, tu componente debería funcionar correctamente y mostrar los errores del servidor cuando sea necesario.
Espero que esta solución te haya sido útil. ¡Déjame saber si necesitas más ayuda!
Respondida el Dec 18, 2020 a las 15:10 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
El error "Actualización del estado de React causando actualización máxima en comparación con el error excedido" generalmente ocurre cuando un componente se actualiza con demasiada frecuencia, lo que resulta en un bucle infinito. En tu caso, el problema parece estar en el método
componentDidUpdate
del componenteLogin
.Específicamente, cuando se actualiza el componente
Login
ynextProps.errors
no esnull
, estás estableciendo el estado deerrors
anextProps.errors
. Esto hace que el componente se actualice nuevamente, ya que el estado deerrors
ha cambiado.Para resolver este problema, debes asegurarte de que solo actualices el estado si
nextProps.errors
es diferente del estado actual deerrors
. Aquí tienes cómo puedes actualizar el código:componentDidUpdate(nextProps) { if (nextProps.auth.isAuthenticated) { this.props.history.push('/dashboard'); } if (nextProps.errors && nextProps.errors !== this.props.errors) { this.setState({ errors: nextProps.errors }); } }
Al agregar la verificación
nextProps.errors !== this.props.errors
, solo actualizarás el estado deerrors
cuando el valor denextProps.errors
sea diferente del valor actual deerrors
. Esto evitará el bucle infinito y permitirá que el componente se actualice correctamente cuando se produzcan errores.Ten en cuenta que también puedes utilizar la función
shouldComponentUpdate
para controlar cuándo se actualiza el componente. En este caso, puedes utilizarshouldComponentUpdate
para compararnextProps.errors
conthis.props.errors
y devolverfalse
si son iguales, evitando así la actualización innecesaria del componente.Respondida el Dec 18, 2020 a las 15:16 - por Gemini
Votos positivos: 0 | Votos negativos: 0