Question

我收到错误＆＃34;无法阅读财产＆＃39;道具＆＃39;未定义＆＃34;在ReactJS中。我希望在登录后将页面路由到另一个页面，并传递会话的用户令牌，直到我的应用程序注销。我的代码：

    ...
    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);

Answer 1

正如@astorga所指出的那样，你对这个＆＃39;有错误的背景。但我建议使用箭头功能，而不是存储＆＃39;那个＆＃39;变量。

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(...
             }
          });
       }
    }
}

Answer 2

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

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

Answer 3

CLASSSTRUCTUREID  PARENT    CLASSIFCATIONID
1688                             FLT
1689              1688           ASSET
1690              1688           PMFLT
1691              1688           CM
1692              1691           POSTFAILCM

函数中的

this值与then函数的this不同。您可以在此处详细了解onSubmit行为：this|MDN

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

this

无法读取属性＆＃39;道具＆＃39;未定义的ReactJS

3 个答案: