Tengo un componente Login:

var React = require('react');
var LoginForm = require('./LoginForm');


    class Login extends React.Component {

        constructor (props) {
            super(props)

            // Bind the this context to the handler function
            this.handler = this.handler.bind(this);

            // Set some state
            this.state = {
                username: '',
                password: '',
                token: ''
            };
        }

        handler(data) {
            this.setState(data);
        }

        render() {
            return (
                <div className="login-container">
                    <div className="outer">
                        <div className="middle">
                            <div className="inner">
                                <LoginForm loginHandler={this.handler}/>
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
    }

    module.exports = Login;

Y uno LoginForm:

var React = require('react');
import axios from 'axios';

class LoginForm extends React.Component {

    handleLoginClick(event) {
        event.preventDefault();

        var apiBaseUrl = "http://localhost:8000/api-token-auth/";
        var payload={
            "email": "jermaine71@yahoo.com",
            "password": "thePassword"
        };
        axios.post(apiBaseUrl, payload)
            .then(function (response) {
                console.log(response);

                var data = {
                    username: 'jermaine71@yahoo.com',
                    password: 'thePassword',
                }

                this.props.loginHandler(data) . // <-- FAILS HERE. this is undefined

            })
            .catch(function (error) {
                alert('NO');
                console.log(error);
            });
    }

    render() {
        return (
            <form>
                <input type="text" className="form-control" name="username" placeholder="Email Address" required="" />
                <input type="password" className="form-control" name="password" placeholder="Password" required=""/>
                <p></p>
                <button onClick={(event) => this.handleLoginClick(event)} className="btn btn-lg btn-primary btn-block">Login</button>
            </form>
        )
    }
}

module.exports = LoginForm;

Sé que la función axios real debería hacerse en otro lugar, pero mi pregunta es diferente: parece que no puedo obtener el nombre de usuario, la contraseña y la información del token para el padre. La función falla en el punto que se muestra arriba, donde esto no está definido y no hay acceso al controlador desde el elemento secundario disponible. ¿Qué estoy haciendo mal aquí?

0
JasonGenX 19 jun. 2017 a las 23:51

3 respuestas

La mejor respuesta

Si usa ES6, entonces necesita usar una función de flecha gruesa en su .then en la función handleLoginClick.

axios.post(apiBaseUrl, payload)
.then( response => {
    var data = {
        username: 'jermaine71@yahoo.com',
        password: 'thePassword',
    };
    this.props.loginHandler(data);
})
.catch( error => {
    alert('NO');
    console.log(error);
});

Alternativamente, puede pasar una función componente que ya está vinculada a this:

handleClickResponse(response) {
    var data = {
        username: 'jermaine71@yahoo.com',
        password: 'thePassword',
    };
    this.props.loginHandler(data);
}
handleLoginClick(){
   ...
    axios.post(apiBaseUrl, payload)
    .then(response => this.handleClickResponse(response))
    .catch( error => {
        alert('NO');
        console.log(error);
    });
}
1
Chase DeAnda 19 jun. 2017 a las 21:08

props es undefined porque cuando el contexto de this en la llamada axios .then no hace referencia al this que esperas.

Dentro de handleLoginClick haz esto para que puedas acceder a this:

handleLoginClick(event) {
    var here = this

    //... then inside the `then`

    axios.post(apiBaseUrl, payload)
        .then(function (response) {
            //...
            here.props.loginHandler(data)
        })

O use la función de flecha gorda de esta manera:

.then(response => {
    this.props.loginHandler(data)
})
1
KA01 19 jun. 2017 a las 21:06

Debes vincular tu función de promesa anónima

axios.post(apiBaseUrl, payload)
        .then(function (response) {
            console.log(response);

            var data = {
                username: 'jermaine71@yahoo.com',
                password: 'thePassword',
            }

            this.props.loginHandler(data) . // <-- FAILS HERE. this is undefined

        }.bind(this))  // <<<<<<<<<<<<<<<<<<< HERE
        .catch(function (error) {
            alert('NO');
            console.log(error);
        });
1
Ji aSH 19 jun. 2017 a las 21:05