0

Dentro de una tabla tengo un boton, que lleva a otra pestaña que contiene un formulario para editar el registro seleccionado.

Con useEffect estoy intentando llenar el formulario pero lo muestra vacio y en la consola aparece el siguiente error:

Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

Tabla

  actions={[
      {
        icon: "iconname",
        onClick: (event, rowData) => 
        props.history.push(`/Articulo/edit/${rowData.Id}`)
      }

Editar Articulo

function EditarArticulo(props) {

    const [articulos, setArticulos]=useState({articulo: '',descripcion:'', precio:0})

    useEffect(function() {
        async function getArticulos() {
          try {
            const response = await  axios.get(`/api/Articulos/${props.match.params.Id}`);
            setArticulos(response.data);        
          } catch(error) {
            console.log(error);
          }
        }
        getArticulos();    
      }, [props]);

      const handleSubmit=(event)=>{
          event.preventDefault();
          async function updateArticulos(){
              try {
                  await axios.put(`/api/Articulos/edit/${articulos.Id}`,articulos)
                  props.history.push('/Articulos')
              } catch (error) {
                  console.log(error)
              }
          }
          updateArticulos();
      }

      const handleChange=(event)=>{
          setArticulos({...articulos,[event.target.name]:event.target.value})
      }

      return(
            <div>
                <Typography variant="h4" align="center">
                Editar 
                </Typography>
                <form onSubmit={handleSubmit} >
                    <div> 
                        <TextField
                            name="articulo"
                            type="text"
                            label="articulo"
                            value={articulos.articulo}
                            onChange={handleChange}
                            margin="normal"
                            variant="outlined"
                        />
                        <TextField
                            name="descripcion"
                            type="text"
                            label="descripcion"}
                            value={articulos.descripcion}
                            onChange={handleChange}
                            margin="normal"
                            variant="outlined"
                        />
                        <TextField
                            name="precio"
                            type="number"
                            label="precio"
                            value={articulos.precio}
                            onChange={handleChange}
                            margin="normal"
                            variant="outlined"
                        />
                            <Button
                                onClick={handleSubmit} 
                                value="Submit"
                                variant="contained"
                                color="primary"
                                type='submit'>
                                Edit
                            </Button>
                  </div>
                </form>
            </div>
      )
}
2
  • const response = await axios.get('/api/Articulos/${props.match.params.Id}'); podrías mostrar un console log de que devuelve esto? Commented el 8 ene. 2020 a las 20:29
  • @VictorAlvarez response.data {message: "", success: true, registros: 1, Articulos: Array(1)} props.match.params.Id 1
    – senseilex
    Commented el 8 ene. 2020 a las 20:48

1 respuesta 1

0

Partiendo de la base de que la respuesta que recibes de axios.get('/api/Articulos/${props.match.params.Id}');

{message: "", success: true, registros: 1, Articulos: Array(1)}

Cambiar la parte donde asignas el valor a articulos

setArticulos(response.data.Articulos[0]); 
2
  • Ahora estoy recibiendo el siguiente error: Error: Request failed with status code 404
    – senseilex
    Commented el 8 ene. 2020 a las 21:25
  • 1
    eso seria un error que al hacer una petición no encuentra la url /api/Articulos/${props.match.params.Id} primero comprueba que este haciendo la petición correctamente a la url del api y que el parametro Id si se esta enviando Commented el 9 ene. 2020 a las 2:01

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.