No se que estoy haciendo mal, ya que estoy intentando editar a través de mi formulario en react un usuario pero los datso que envía son 'null' no sé que estoy haciendo mal me pueden ayudar?
Como pueden observar en el state traigo el objeto de la BD, está undefine porque tengo que esperar a la carga se hace con axios desde back. Una vez que tengo el objeto en el form le paso el valor de la clave del objeto y con el manejador de estado la función handleInputChange(), se supone que me cambia el value, y cuando lo envío lo envío handleformsubmit() lo envío con el estado cambiado. Y me lo actualiza a "null" no llega el valor a la clave que necesito. no se que estoy haciendo mal.
constructor(props) {
super(props)
this.state = {
userDetail: undefined
}
this.userService = new UserService()
}
componentDidMount = () => {
const id = this.props.match.params.userId
this.userService.getOneUser(id)
.then(response => this.setState({ userDetail: response.data }))
.catch(err => console.log(err))
}
handleInputChange = e => {
const { name, value } = e.target
this.setState({ userDetail: value })
console.log('handle')
}
handleFormSubmit = e => {
e.preventDefault()
const id = this.props.match.params.userId
this.userService.editUser(id)
.then(response => console.log(response.data))
.catch(err => console.log(err))
console.log('jfjfjfjf')
}
render() {
console.log(this.state.userDetail)
return (
!this.state.userDetail ? <h3>CARGANDO</h3> :
<>
<h1>Formulario de Edición del User</h1>
<form onSubmit={this.handleFormSubmit}>
<label>{this.state.userDetail.updatedAt}</label><br></br>
<input onChange={this.handleInputChange} name={this.state.userDetail.username} placeholder={this.state.userDetail.username} value={this.state.userDetail.username} placeholder={this.state.userDetail.username} type="text" />
<input value="enviar" type="submit" />
</form>
</>
)
}
}
export default UserEditForm```
handleFormSubmit
solo estas enviando elthis.props.match.params.userId
, en tu codigo no se mira que mande otra informacionthis.userService.editUser
, puede que ademas delid
, espere recibir también el valor del input que se está modificando, en este caso lo que hay enthis.state.userDetail
, que es el nuevo estado.userDetail
viene con llaves (updatedAt, username), ¿Puedes confirmar esto?.