0

Que tal estoy tratando de resolver un error que me da al actualizar el state despues de una peticion ajax

alguna idea de como resolver este error? estoy utilizando Sweetalert para mostrar los mensajes al hacer las peticiones.

unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

 constructor(props) {
       super(props);
       this.state ={
           showmodal: false,
           modal: {
              title: '',
              icon: "success",
              type: "success",
              text: ""
            },
         }
}

handleSubmitevent(){
    axios.post('url/to/myApi').then((success) => {
            let dataOptions = this.state.modal;
            dataOptions.text = "exito";
            dataOptions.icon = "success";
            dataOptions.type = "success";
        this.setState({ showmodal: false, modal: dataOptions });
    });
}
render(){
let mensaje = <SweetAlert show={ this.state.showmodal } 
                                    confirmButtonText="Continuar" 
                                    confirmButtonColor="#3085d6" 
                                    type={this.state.modal.type} 
                                    title = {this.state.modal.title } 
                                    text = {this.state.modal.text}  
                                    onConfirm = { () => { this.setState({ showmodal: true}); }
                                } />

return (
<form onSubmit={this.handleSubmitevent}>
       <input type="text" className="form-control" value={this.state.producto} name="producto" onChange={event => this.setState({producto:event.target.value}) }></input>
       <input type="number" min="0" className="form-control" name="precio" value={(this.state.precio != null) ? this.state.precio : ''   } onChange={event => this.setState({precio:event.target.value})}></input>
       <button type="submit"  className="btn btn-primary col-md-3"></button>
    </form>
{mensaje}
    )
}

Cannot flush updates when React is already rendering.

4
  • Por favor muéstranos algo más de código, ¿dónde llamas a la función handleSubmitevent? el 30 ago. 2019 a las 22:48
  • tengo un formulario que ejecuta la funcion <form onSubmit={this. handleSubmitevent}>, valido los campos y al final ejecuto el ajax el 31 ago. 2019 a las 6:05
  • onConfirm = { () => { this.setState({ showmodal: true}); } El modal abierto vuelve a lanzar la orden de abrir de nuevo? el 2 sep. 2019 a las 7:07
  • hice un copy paste para ejemplificar, es false para ocultar el modal el 3 sep. 2019 a las 4:52

1 respuesta 1

1

Haré una respuesta un poco corta, sin entrar a mucho detalle de qué sucede, pero básicamente estás modificando el objeto state directamente, lo cual puede ocasionar muchos tipos de errores, entre esos el que te ocurre.

Debes tener en cuenta que al correr esto: let dataOptions = this.state.modal no estás creando una copia del objeto, si no que estás creando una variable llamada dataOptions la cual apunta a la misma dirección de memoria de this.state.modal por lo que cualquier modificación que haces en dataOptions en realidad la estás haciendo sobre this.state.modal, es decir, estás haciendo algo como esto this.state.modal.text = "exito" cuando eso deberías hacerlo es en un setState como dice la documentación de React

Por eso es mejor asignar creando una copia del objeto en sí, podrías cambiar tu método para que quede de esta forma:

handleSubmitevent() {
  axios.post('url/to/myApi').then((success) => {
    let dataOptions = {
      ...this.state.modal,
      text: "exito",
      icon: "success",
      type: "success",
    }
    this.setState({ showmodal: true, modal: dataOptions });
  });
}
1
  • gracias @german-alzate por la respuesta tkm el 3 sep. 2019 a las 4:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.