React: TypeError: Cannot read property 'setState' of undefined

Question

我是 React 新手，正在尝试创建登录表单。当用户输入正确的登录信息时，rest api 将 return JWT 令牌。但是我找不到如何将状态 "token" 设置为响应的值。我仍然可以将 response.token 保存到本地存储并正确显示。我认为 "this" 指向错误的功能，但我如何在不破坏逻辑的情况下解决这个问题？有什么提示吗？谢谢

Login.js

import React from 'react';

import axios from 'axios';

import Glyphicon from 'react-bootstrap/lib/Glyphicon';

import MyInput from './../components/Input';

import { connect } from "react-redux";

import { Form } from 'formsy-react';

var server = "http://localhost:3000";

class Login extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            canSubmit: false,
            token: null
        };
        this.enableButton = this.enableButton.bind(this);
        this.disableButton = this.disableButton.bind(this);
        this.submit = this.submit.bind(this);
    }

    submit(data) {
        axios.post(server + '/login', {
            username: data.username,
            password: data.password
        })
            .then(function (response) {
                if (response.data.token) {
                    var token = response.data.token;
                    localStorage.setItem("token", token);
                    this.setState({ token: token }); //Here is the problem
                    console.log(this.state.token);
                } else {
                    location.reload();
                }
            });
    }

    enableButton() {
        this.setState({ canSubmit: true })
    }
    disableButton() {
        this.setState({ canSubmit: false })
    }

    render() {
        return (
            <div className="loginForm">
                <h2 className="page-header">Login</h2>
                <Form onSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
                    <div className="form-group">
                        <label>Username: </label>
                        <MyInput name="username" validations="isExisty" validationError="Required" required />
                    </div>
                    <div class="form-group">
                        <label>Password: </label>
                        <MyInput type="password" name="password" validations="isExisty" validationError="Required" required />
                    </div>
                    <button
                        type="submit"
                        className="btn btn-primary"
                        disabled={!this.state.canSubmit}>
                        Login
                    </button>
                </Form>
                <br/>
                <a href="register">Create user!</a>
                <a id="forgot" href="forgot">Forgot password?</a>

            </div>);
    }
}
export default Login;

Answer 1

正如 Alexander 在评论中所述，我必须使用箭头函数 => 或设置 this 进行回调。

Answer 2

您可以使用箭头函数来保留 submit 的上下文并能够访问 setState:

submit(data) {
    axios.post(server + '/login', {
      username: data.username,
      password: data.password
    })
    .then((response) => {
        if (response.data.token) {
            var token = response.data.token;
            localStorage.setItem("token", token);
            this.setState({ token: token });
            console.log(this.state.token);
        } else {
            location.reload();
        }
    });
}

React: TypeError: Cannot read property 'setState' of undefined

React: TypeError: Cannot read property 'setState' of undefined

javascript

state

login

ecmascript-6

reactjs