无法读取未定义 ReactJS 的属性“道具”答案

【问题标题】：Cannot read property 'props' of undefined ReactJS无法读取未定义 ReactJS 的属性“道具”
【发布时间】：2018-04-11 11:55:06
【问题描述】：

我在 ReactJS 中收到错误“无法读取未定义的属性 'props'”。我想在登录后将页面路由到另一个页面，并传递会话的用户令牌，直到我的应用程序注销。我的代码：

    ...
    import { withRouter } from 'react-router';
    import { EventList } from "../EventList/EventList";

    export class SignIn extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          fields: {
            username: '',
            password: ''
          },
          errors: {}
        }
        this.onSubmit = this.onSubmit.bind(this);
      }
      ...
      onSubmit(e){
        e.preventDefault();
        if(this.handleValidation()){
          var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
          var input = this.state.fields;
          axios.post(apiBaseUrl+'v1/users/signin', input)
          .then(function (response) {
             console.log(response);
             if(response.data.status == 200){
               console.log("Login successful");
               alert("Login successful");
               this.props.router.push('/EventList');
             }
             else if(...
             }
           })...
           });
         }
      }
    ...
      render() {
        return (
          ...
          <button type="submit" className="btn btn-primary btn-lg pull-right" onClick={this.onSubmit}>Sign In</button>
...
        );
      }
    }

    export default withRouter(SignIn);

【问题讨论】：

你至少能指出哪条线断了？ onSubmit 在哪里被调用？
this.props.router.push('/EventList');
请编辑您的帖子以显示这一点。另外，将代码放在调用 onSubmit 的地方

标签： reactjs

【解决方案1】：

正如@astorga 所指出的，您对“this”的上下文有误。但我建议使用箭头函数而不是存储“那个”变量。

onSubmit(e) {
    e.preventDefault();
    if(this.handleValidation()){
        var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
        var input = this.state.fields;
        axios.post(apiBaseUrl+'v1/users/signin', input)
          .then((response) => { // Arrow function here, which doesn't create new 'this' scope
             if(response.data.status == 200) {
               this.props.router.push('/EventList');
             }
             else if(...
             }
          });
       }
    }
}

【讨论】：

【解决方案2】：

then 函数内部的this 的值不同于onSubmit 函数的this。您可以在此处阅读有关 this 行为的更多信息：this|MDN

为此，您应该将正确的this 值存储在另一个变量中，就像@thomas-lin 所说：

onSubmit(e){
  var that = this;
  // ...
  // later, on axios call:
  axios.post(apiBaseUrl+'v1/users/signin', input)
  .then(function (response) {
    console.log(response);
    if(response.data.status == 200){
      console.log("Login successful");
      alert("Login successful");
      that.props.router.push('/EventList');
    }
    else if(...) {
      //...
    }
  })

【讨论】：

【解决方案3】：

是“this”的错误使用导致了这个错误，试试这样的代码：

onSubmit(e){
  var that = this
  .....
  that.props.router.push('/EventList');

}

【讨论】：