Question

我正在使用React并试图创建一个登录表单。当用户输入正确的登录信息时，rest api将返回JWT令牌。但是，我无法找到如何设置状态＆＃34;令牌＆＃34;成为回应的价值。我仍然可以将response.token保存到localstorage并且显示正确。我认为＆＃34;这个＆＃34;指向错误的功能，但是如何在不破坏逻辑的情况下解决这个问题呢？任何提示？感谢

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

您可以使用箭头功能保留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();
        }
    });
}

Answer 2

正如亚历山大在评论中所说，我必须使用箭头功能=>或设置this进行回调。

React：TypeError：无法读取属性＆＃39; setState＆＃39;未定义的

2 个答案: