反应：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'

回答

相关问题