firebase ::无法读取null的属性'props' [英] firebase :: Cannot read property 'props' of null

问题描述

您好，我正在尝试将React-Router与Firebase一起使用.但这给了我这个错误.

Hello i am trying to use react-router with firebase. but it gives me this error.

无法读取null的属性"props"

Cannot read property 'props' of null

这正是我在使用我的React-Router的代码

this is exactly code, where i am using my react-router

向下代码在组件上作为loginpanel组件.

Down code is on component as loginpanel component.

else if (this.email.value === currentObject.username && this.password.value === currentObject.password && user_id)
 {
     var data25 = '';
     var groupid = '';

     var query = firebase.database().ref("/Users_group").orderByChild('id').equalTo(user_id);
     query.on("child_added", function hello (snapshot) {

         data25 = snapshot.val();

         groupid = data25.User_Group_id;

         AppActions.createComment(currentObject.username, currentObject.password, user_id, groupid);

//error is here,

         this.props.router.push('Index');
     },()=>{

     });

 }

我的react路由器在main.jsx上声明 我的反应路由器看起来像这样.

my react router is declared on main.jsx my react-router looks like this.

       <Router history={hashHistory}>
      <Route path="/" component={Loginpanel}/>
      <Route path="Index" component={Index}/>
      <Route path="Form" component={Form} />
      <Route path="Checkindex" component={Index}/>
      <Route path="Signup" component={Signup}/>
      <Route path="Admin" component={Admin}/>
      <Route path="AdminEditDetails" component={AdminEditDetails}/>
      <Route path="AdminDetails" component={AdminDetails}/>

     </Router>,

推荐答案

在您的回调中，this指针不再指向您的React组件.有很多方法可以解决这个问题:

In your callback, the this pointer no longer points to your React component. There are many ways to deal with this:

var component = this;
query.on("child_added", function hello (snapshot) {
    ...
    component.props.router.push('Index');
});

明确绑定this

query.on("child_added", function hello (snapshot) {
    ...
    this.props.router.push('Index');
}).bind(this);

使用粗箭头，隐式保留this

query.on("child_added", snapshot => {
    ...
    this.props.router.push('Index');
});

请注意，这是开发人员在JavaScript中遇到的一个非常普遍的问题，我强烈建议您了解有关this与回调的行为的更多信息:

Note that this is a very common problem that developers have in JavaScript and I highly recommend you learn more about the way this behaves with callbacks:

• 聚合物this.push无法正常工作
• 如何调用自执行匿名函数中的函数?
• 使用JavaScript的"bind"方法
• 使用React组件登录Firebase

• Polymer this.push not working
• how to call a function inside a self-executing anonymous function?
• Use of the JavaScript 'bind' method
• Firebase Login with React Components

这篇关于firebase ::无法读取null的属性'props'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！