反應：TypeError：無法讀取未定義的屬性'setState'

Im noob與React並嘗試創建登錄表單。當用戶輸入正確的登錄信息時，api將返回JWT令牌。但我無法找到如何設置狀態「令牌」作爲響應的價值。我仍然可以將response.token保存到localstorage並正確顯示。我認爲「這個」指的是錯誤的功能，但是我怎麼能在不破壞邏輯的情況下解決這個問題？任何提示？由於反應：TypeError：無法讀取未定義的屬性'setState'

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;

來源

2016-08-25 Jack M.

在'.then'回調'this'並不是指組件，請使用箭頭功能，而不是'function' - '.then（（response）=> {...}）'。或者設置'this'作爲回調，''.then（function（response）{...} .bind（this））'' –

是的，就是這樣。非常感謝！ –

您可以使用箭頭功能，以保持的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(); 
     } 
    }); 
}

來源

2016-08-25 07:25:59

非常感謝你爲這十億美元的答案！你應該嘗試競選美國總統！因爲這個愚蠢的修復，我已經毫無顧慮地將我的筆記本電腦燒燬了，而您的主席剛剛爲我節省了價值1200美元的機器！榮譽。 –

謝謝你的幫助。如果你可以指出一些文檔解釋爲什麼使用箭頭功能保持原來的狀態，會喜歡它。謝謝！ – th3morg

亞歷山大的評論所說，我必須使用箭頭功能=>或回調設置this。

來源

2016-08-25 07:25:53

反應：TypeError：無法讀取未定義的屬性'setState'

回答

相關問題