1

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```
6
  • En tu handleFormSubmit solo estas enviando el this.props.match.params.userId, en tu codigo no se mira que mande otra informacion
    – Isaac
    Commented el 23 jul. 2020 a las 20:05
  • Pero se supone que debe enviar el nuevo estado. El otro handle lo actualiza o eso debe de hacer. Gracias compañero.
    – Eva MV
    Commented el 23 jul. 2020 a las 21:44
  • Estoy de acuerdo con @Isaac, la sugerencia es revisar el método this.userService.editUser, puede que ademas del id, espere recibir también el valor del input que se está modificando, en este caso lo que hay en this.state.userDetail, que es el nuevo estado.
    – g.4
    Commented el 24 jul. 2020 a las 4:50
  • Claro, desde back espera todos los campos que son editables, pero cuando no los recibe, lo actualiza como null en mongo. Y claro aquí es donde viene mi locura, porque ya no sé si lo debo de hacer desde front o desde back. Desde front no me actualiza el state con el nuevo value. Que se supone que para eso es el manejador de handleInput :(
    – Eva MV
    Commented el 24 jul. 2020 a las 8:18
  • Para que haya sincronía entre el input vDOM y el state, se debe configurar un controlled component, en tu código aún no está configurado, ahora bien, parece que el objeto userDetail viene con llaves (updatedAt, username), ¿Puedes confirmar esto?.
    – g.4
    Commented el 25 jul. 2020 a las 3:24

1 respuesta 1

0

Veo dos problemas:

  • Front End : Capturar el estado del input de React.
  • Back End : Enviar el nuevo estado a BD.

Nota: Hay algunos puntos que debes verificar de tu lado. No es una respuesta definitiva.

Front End

Tú comentaste lo siguiente:

Desde front no me actualiza el state con el nuevo value. Que se supone que para eso es el manejador de handleInput :(

En este momento, deberías tener un error en la consola relacionado a uncontrolled component.

Controlled Component

Primero, hay que sincronizar el state de React con el input de vDOM, según el objeto que esperas recibir de BD, en state se necesita la siguiente estructura:

this.state = { 
    userDetail : {
      updatedAt:'',//revisa mis notas en relación a esta llave al final
      username: ''
    }
  }

El input puede quedar así, cambia el valor de la propiedad name a username:

<input
 placeholder='Name'
 name='username'
 type='text'
 value={this.state.userDetail.username}
 onChange={this.handleInputChange}
/>

Luego, viene el primer snapshot (re-render) en componentDidMount, me parece que hay que aplicar un parse a la respuesta del server, antes de asignar a state; aquí estoy asumiendo que, como lo mencionaste en los comentarios, estas recibiendo la siguiente estructura de BD: {updateAt:value, username:value}:

componentDidMount = () => {

        const id = this.props.match.params.userId

        this.userService.getOneUser(id)
            .then(response => {
                const pResponse = JSON.parse(response.data);
                const userDetail = Object.assign({}, pResponse);
                this.setState({ userDetail });
        ).catch(err => console.log(err))

    }

Enseguida, hay que agregar el handle en el constructor del componente (hacer el binding del custom method handleInputChange):

constructor(props) {
        super(props);
        this.state = { 
                userDetail : {
                    updatedAt:'',
                    username: ''
                }
        };
        this.userService = new UserService();
        this.handleInputChange = this.handleInputChange.bind(this);
  }

Finalmente, la función handleInputChange puede quedar así:

handleInputChange = e => {
        const name= e.target.name;
        const value = e.target.value;
        this.setState({ userDetail[name]: value });
        console.log('handle’);
    }

Lo que se está tratando de hacer, es sincronizar userDetail.username del objeto state, con el input de vDOM; esta sincronización se aplica cuando se require que React controle el valor de algún input element, se conoce como controlled components.

Una vez realizados estos cambios, ya se podrá ver la sincronía entre el input del usuario y el estado de la propiedad this.state.userDetail.username:

  handleInputChange = e => {
           const name= e.target.name;
           const value = e.target.value;
           this.setState({ userDetail[name]: value });
           console.log('handle' + this.state.userDetail);
        }

Back End

Tú comentaste lo siguiente:

Claro, desde back espera todos los campos que son editables, pero cuando no los recibe, lo actualiza como null en mongo. Y claro aquí es donde viene mi locura, porque ya no sé si lo debo de hacer desde front o desde back

Lo normal es completar la operacion update desde el backend, update en BD.

Aquí, como bien señalo el colega @isaac, en el método de persistencia, solo se está enviando el id: this.userService.editUser(id)

Desconozco como es la implementación del método this.userService.editUser(), pero regularmente se debe enviar el id, junto con el valor que se quiere actualizar en BD, en este caso es el valor de la llave username del objeto this.state.userDetail, tal vez si lo envías así, funcione (aquí tendrías que verificarlo de tu lado):

const stateCopy = this.state.userDetail.username;
    this.userService.editUser(id, stateCopy).then(response => console.log(response.data))
                .catch(err => console.log(err))

Sugiero revisar qué tipo de argumento ademas del id , consume el método this.userService.editUser(id, argumentos), tal vez haya que dar algún formato a this.state.userDetail.username, antes de pasarlo; o tal vez se solicitan todas las llaves del objeto userDetail (username, updateAt), eso también lo debes verificar de tu lado.

Por último, veo muy sospechosa la llave updatedAt, el sentido común indica que es un objeto tipo Date, que debe registrar cuándo se realizó el último cambio en el formulario. Si es así, puede que también necesites darle el formato correcto y enviarlo al método de persistencia junto con username.

Espero que esta respuesta sea de ayuda.

1
  • G.4 lo intetaré ahora a la tarde, y te digo. Pero tiene buena pinta la respuesta. ;)
    – Eva MV
    Commented el 28 jul. 2020 a las 8:10

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.