4

porque cuando pongo una función de esta manera,el this.state, no me esta trayendo los valores que le paso cuando escribo en los input

fnLogin(event){
        debugger;
        event.preventDefault();
        this.setState(obtenerToken(this.state)); // this.state es marcado como undefined
        this.props.fnSetToken(this.state.token); 
    }

Este es mi código, cuando escribo en los input, cada input cuenta con un valor en el state y este se sobrescribe, despues doy click en "NamInputEntrar" para ir a la función fnLogin.

import React, { Component } from 'react'
import { Redirect } from 'react-router'
import { flogin } from '../Services/usuarios.service';
import './Estilo/Login/index.css';
import { Button , Input, CardImg} from 'reactstrap';
import obtenerToken from '../logic/obtenerToken.js';
import  {connect} from 'react-redux';
import getToken  from '../Redux/Actions.js';

class Login extends Component {  
      constructor(props){
              super(props);

              this.state = {
                redirectToReferrer: false, 
                user : "",
                password : "",
                clickOnButtonEnter: false , 
                token : ""
              };
      }

    fnLogin(event){
        debugger;
        event.preventDefault();
        this.setState(obtenerToken(this.state));
        this.props.fnSetToken(this.state.token); 
    }

    handleChangeInputs = (event) => {
        switch(event.target.name){
                  case  "NamInputUser":
                    this.setState({user: event.target.value});
                  break;

                  case  "NamInputPassword":
                    this.setState({password: event.target.value})
                  break;
                  default:
                   ;
                  break;
        }
    }

  render() { 
              const { from } = this.props.location.state || { from: { pathname: "/" } };
              const { redirectToReferrer } = this.state;

              return <div className = "container">
                            <CardImg src={require("./Imagenes/user2-512.png")} className="imgLogo" />
                            <Input type="text" value={this.state.user} onChange={this.handleChangeInputs} name = "NamInputUser" className = "NamInputUsuario" placeholder = "Usuario" />
                            <Input type="password" value={this.state.password} onChange={this.handleChangeInputs} name = "NamInputPassword"  className = "NamInputPassword"   placeholder = "Contraseña"/>
                            <Button onClick={this.fnLogin} className  = "NamInputEntrar"   color="primary">Entrar</Button>
                            <Button className = "NamInputRegis" color="secondary">Registrarme</Button>
                   </div>
  }
}

export default Login;

Sin embargo, cuando pongo la función con una arrow function esta si accede al state con todos los valores que sobreescribi en los input.

 fnLogin = (event) => {   
            debugger;
            event.preventDefault();
            this.setState(obtenerToken(this.state));
            this.props.fnSetToken(this.state.token); 
 }

Leí sobre las arrow function,me di cuente que estas no cuentan con su propio contexto, y creo que por esto le es facil acceder a mi objeto state que esta de manera global, ya leí sobre el this y este aquí esta accediendo al objeto actual deberia encontrar el state, con los valores actualizados, pero no se que este pasando.

Saludos, aiudaa!!

2

1 respuesta 1

7

Acabas de tropezar con la gran diferencia entre function( ) y ( ) => { }.

  1. function( ) no almacena su propio this. Este se obtiene al momento de invocarla, no al crearla.

  2. ( ) => { } si almacena su propio this, que se toma del contexto en el que se crea.

Lo anterior se puede ver aquí:

var a = {
  nombre: 'nivel1',
  mostrar: function( ) { console.log( this.nombre ); },
  hijo: {
    nombre: 'nivel2',
    mostrar: function( ) { console.log( this.nombre ); }
  }
}

var b = a.hijo.mostrar;

a.mostrar( );
a.hijo.mostrar( );

b( );

Salida:

nivel1
nivel2
undefined

¿ Porqué al llamar a b( ) sale undefined ? ¿ Acaso no es lo mismo que a.hijo.mostrar( ) ?

Ahí se observa claramente como el this se toma de la llamada, no de la función ni del contexto en el que esta se creó.

En cuanto a tu pregunta, tu mismo te has respondido:

  1. Usa funciones flecha ( ) => { }.
  2. Usa function.prototype.bind( ), lo cual te permite asignar un this arbitrario a una invocación.

    function algo( ) { ... }
    var x = 'cucu';
    var b = algo.bind( x );
    
    b( );
    
9
  • @JackNavaRow ¿ Que te crees, que solo programo en C/C++ ? ¡ Soy multilenguaje ! :-p
    – Trauma
    Commented el 16 nov. 2018 a las 19:29
  • @JackNavaRow Si, bueno. Preguntas como esta suelen salir de vez en cuando. No suelo responderlas, pero es que estoy aburrido :-)
    – Trauma
    Commented el 16 nov. 2018 a las 19:32
  • Muchas gracias, esta bien entendida tu explicación. Commented el 16 nov. 2018 a las 21:01
  • Ya lo he resuelto, por parte de react js, solo agregue al contstructor esta declaración Commented el 16 nov. 2018 a las 21:19
  • this.fnLogin = this.fnLogin.bind(); Commented el 16 nov. 2018 a las 21:19

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.