firebase :: 无法读取 null 的属性“道具”

Question

您好，我正在尝试将 react-router 与 firebase 一起使用。但它给了我这个错误。

无法读取 null 的属性“props”

这正是代码，我正在使用我的 react-router

Down 代码作为 loginpanel 组件在组件上。

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');
     },()=>{

     });

 }

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

       <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>,

Answer 1

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

将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 在回调中的行为方式：

• 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