React: TypeError: Невозможно прочитать свойство setState undefined

Question

Im noob with React и попытка создать форму для входа. Когда пользователь вводит правильную регистрационную информацию, rest api вернет токен JWT. Однако я не могу найти, как установить «токен» состояния в качестве значения ответа. Тем не менее я могу сохранить response.token в localstorage, и он показывает правильно. Я думаю, что «это» указывает на неправильную функцию, но как я могу обойти это без нарушения логики? Любые намеки? Благодаря

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 для обратного вызова.