反应本机和全局可访问的对象 [英] react native and globally accessible objects

问题描述

我在 React Native 和能够从更深层次的函数中访问函数、变量和对象的时候真的很糟糕.老实说，我认为 Redux 是我的救星，但我也遇到了完全相同的障碍.一个例子:

I am having a really terrible time with react native and being able to access functions, variables and objects from within deeper levels of functions. I honestly thought Redux would be my saving grace here, but I am running into exactly the same hurdle with this too. An example:

export class Home extends React.Component {

static propTypes = {
    navigation: PropTypes.object,
    dispatch: Proptypes.func,
};

componentDidMount() {
    Firebase.init();
    firebase.auth().onAuthStateChanged((user) => {
        if (user) {
            this.setState({ loading: false, user });
            firebaseUserID = this.state.user.uid;
            this.props.dispatch(setUserID(firebaseUserID));
            firebaseRef = firebase.database().ref().child("Profiles").child(this.props.userID);
            firebaseRef.once("value").then(function(snapshot) {
                firebaseUserName = snapshot.child("Name").val();
                this.props.dispatch(setUserName(firebaseUserName));
                console.log('Logged in user: ' + this.props.userName);
            });
            this.props.navigation.navigate('Map');
        } else {
            this.props.navigation.navigate('Login');
        }
    });
}

在这个例子中，对我的 Redux 内容的第一次调用非常好:

In this example, the first call to my Redux stuff is perfectly fine:

this.props.dispatch(setUserID(firebaseUserID));

这会抓取正确的用户名并将其保存到我的 Redux 商店.没问题.

This grabs the correct username and saves it to my Redux store. No problem.

错误在于这一行:

this.props.dispatch(setUserName(firebaseUserName));

因为比上一个语句调用更深一层，所以this"的上下文不同.它是下面子函数的一部分，所以 this.props 在这里不存在，尽管上面四行是可以的:

Because it is called one level deeper than the previous statement, therefore the context of "this" is different. It is part of the sub-function below and so this.props doesn't exist here even though literally four lines above it is fine:

firebaseRef.once("value").then(function(snapshot) {

一旦我必须创建子功能(这是所有时间，因为这是代码的工作方式)，我就无法访问使应用程序正常工作所需的所有资源.我一直在通过狡猾的变通方法和多余的变量重新创建来解决问题，但现在已经足够了，我需要它像普通语言一样正常工作.那么，我做错了什么?我应该如何创建对象、函数和变量以便我可以实际使用它们?

As soon as I have to make sub-functions (which is ALL OF THE TIME because this is how code works), I lose the ability to access all of the resources that are required to make the app work. I have been hacking my way through with dodgy work-arounds and superfluous recreation of variables but enough is enough now, I need this to work properly like a normal language. So, what am I doing wrong? How am I supposed to create objects, functions and variables so that I can actually use them?

也许如果有人能帮我解决上面的具体例子，也许这会让我大开眼界，我应该如何前进.

Perhaps if someone could help me work out the specific example above, maybe that will open my eyes to how I am supposed to go forward.

谢谢大家，我相信对你们中的一些人来说这是一个明智的选择，但对我来说这是一堵我无法逾越的墙.

Thanks everyone, I am sure for some of you out there this is a no-brainer, but for me this is a wall that I cannot move past.

推荐答案

根据 MDN

箭头函数表达式的语法比函数表达式更短，并且没有自己的this、arguments、super 或 new.target.

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target.

由于您的函数 firebaseRef.once("value").then(function(snapshot) 未绑定，因此它正在丢失 this 的上下文.

Since your function firebaseRef.once("value").then(function(snapshot) is not bound therefore it is losing the context of this.

因此，最简单的方法是使用 箭头函数 将其绑定为 firebaseRef.once("value").then((snapshot) =>

Therefore the simplest way would be to use an arrow function to bind it as firebaseRef.once("value").then((snapshot) =>

这篇关于反应本机和全局可访问的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！