0

Tengo un formulario el cual usa una API (funciona correctamente), pero, estoy tratando de direccionar después del aviso (ver el switch case en el código "Registro guardado") inserta correctamente pero no me redirecciona a la página que deseo que lleve al usuario. Ya intente con vario métodos, usando el Link, Route y no lo hace. Y lo ultimo que intenté fue con el: this.props.history.push(), y marca este error: TypeError: Cannot read properties of undefined (reading 'push') at Insertar-enfermedades.js:53:1

Código de .js:

import React from "react";
import { Link  } from "react-router-dom";

class Insertarenfermedades extends React.Component {
    constructor(props) {
        super(props);
    }
    state = { 
        txtnombreenf:"",
        txtdescripenf:""
     }

     cambiodeValor=(e)=>{
        const state=this.state;
        state[e.target.name]=e.target.value;
        this.setState({state});
     }

    enviarDatos = (e) =>{
          e.preventDefault();
          console.log("Enviando datos");
          const {txtnombreenf, txtdescripenf}=this.state;
          console.log(txtnombreenf);
          console.log(txtdescripenf);          

          try {                   
                    var datosEnviar={Nombre_enf:txtnombreenf, Descrip:txtdescripenf}

                    fetch("http://localhost/API/Catalogos/Enfermedades/Sp_Insert_Enfermedades.php",{
                           method:"POST",
                           body:JSON.stringify(datosEnviar)
                    })
                    .then(respuesta=>respuesta.json())
                    .then((datosRespuesta)=>{                           
                          switch (datosRespuesta) {
                            case "No insertado, porque están nulos los datos":
                                alert(datosRespuesta);
                            break;

                            case "No insertado, porque ya existe":
                                alert(datosRespuesta);
                            break;                         
                            
                            case "Registro guardado":
                                
                                alert(datosRespuesta,  this.props.history.push("/listarenf")); 
                                this.props.history.push("/listarenf");                  
                            break;
                          }
                     }
                    )
                    .catch(console.log)
                 
          } catch (error) {
            alert(error);
          }
    }   
    render() { 
        const {txtnombreenf, txtdescripenf}=this.state;  

        return ( 
             <div className="card">
                <div className="card-header">
                    Agregar Enfermedades
                </div>
                <div className="card-body">
                    <form onSubmit={this.enviarDatos}>                      
                                <div className="form-group">
                                     <label htmlFor="">Nombre de la enfermedad:</label>
                                     <input type="text" onChange={this.cambiodeValor} value={txtnombreenf}  name="txtnombreenf" id="txtnombreenf" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea el nombre de la enfermedad" ></input>
                                     
                                </div>
                                 
                                <div className="form-group">
                                     <label htmlFor="">Descripción de la enfermedad:</label>
                                     <input type="text" onChange={this.cambiodeValor} value={txtdescripenf} name="txtdescripenf" id="txtdescripenf" className="form-control" aria-describedby="helpId" size={50}  placeholder="Teclea Descripción de la enfermedad" ></input>
                                     
                                </div>
                          
                                <div className="input-group">
                                    <span className="input-group-btn">                                        
                                        <button className="btn btn-success" type="submit" aria-label="">Guardar</button>
                                        <Link to={"/listarenf"} className="btn btn-danger" type="button" aria-label="">Cancelar</Link>
                                        <Link to={"/listarenf"} className="btn btn-warning" type="button" aria-label="">Regresar al Listado</Link>
                                   </span>                                    
                                 </div>                              
                    </form>                             
                </div>                
             </div>
         );
    }
} 
export default Insertarenfermedades;

2 respuestas 2

1

En React router v6 useHistory es reemplazado por useNavigate

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');
0

Y si tratas de desestructurar props antes de realizar el request?

const { history } = this.props

try {
   fetch(...)
    .then(res => res.json())
    .then(data => {
       switch(condicion) {
          case 'Registro guardado': {
             history.push(ruta)
          }
       }
    })
} catch (error) {
   console.log(error)
}

Acá te dejo la fuente

3
  • Hola. Deja verifico y te comento.
    – Saulo
    Commented el 9 ene. 2023 a las 16:08
  • No. No funciono :-/. No entiendo. He seguido estos ejemplos: youtube.com/watch?v=4pG8VboW8iE&ab_channel=ReactDeveloper y también lo que me pasaste, pero, no entiendo porque no funciona.
    – Saulo
    Commented el 9 ene. 2023 a las 21:45
  • También use: cancelCourse = () => { //document.getElementById("webFrmInsertarEnf").reset(); this.setState({ txtnombreenf: "", txtdescripenf: "" }); redirect("/listarenf"); } Y nada... No lo manda a la página que quiero.
    – Saulo
    Commented el 9 ene. 2023 a las 22:33

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.