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>
)
}
const response = await axios.get('/api/Articulos/${props.match.params.Id}');
podrías mostrar un console log de que devuelve esto?response.data {message: "", success: true, registros: 1, Articulos: Array(1)} props.match.params.Id 1