firebase :: 无法读取 null 的属性“道具" [英] 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
这正是代码，我使用的是我的反应路由器
this is exactly code, where i am using my react-router
向下代码作为登录面板组件位于组件上.
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');
},()=>{
});
}
我的反应路由器在 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:
这篇关于firebase :: 无法读取 null 的属性“道具"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
