Javascript 在React Native Redux中分派导入的函数

这是我第一次使用React Native，并且只对Redux进行了短暂的操作，但我在我的

Redux/authentication.js

中有一个函数，该函数用于使用Firebase创建一个新帐户

export function handleAuthWithFirebase (newUser) {
    return function (dispatch, getState) {
        dispatch(authenticating());

        console.log(newUser);
        console.log('Signing up user');
        var email = newUser.email;
        var password = newUser.password;

        firebase.auth().createUserWithEmailAndPassword(email, password).catch(error => {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
        }).then(() => {

            var user = firebaseAuth.currentUser;
            // Set user in Firebase
            firebase.database().ref('/users/' + user.uid).set({
                displayName: newUser.displayName,
                userName: newUser.userName,
                email: newUser.email
            })
        })

        dispatch(isAuthed(user.uid))
    }
}

我将此函数导入到一个SignUpForm组件中，该组件可以获取一些

的用户信息。所以现在我想运行

handleSignUp

函数，但我不完全确定如何运行

class SignUpForm extends Component {
    static propTypes = {

    }
    state = {
        email: '',
        password: '',
        username: '',
        displayName: ''
    }
    handleSignUp () {

        // Want to call handleAuthWithFirebase(this.state) here.    

    }
    render () {
        console.log(this.props);
        return (
            <View style={{flex: 1}}>
                <View>
                    <TextInput
                        style={styles.input}
                        onChangeText={(email) => this.setState({email})} 
                        value={this.state.email} 
                        autoCorrect={false}
                    />
                    <TextInput 
                        style={styles.input}
                        onChangeText={(password) => this.setState({password})}
                        value={this.state.password} 
                        autoCorrect={false}
                    />
                    <TextInput 
                        style={styles.input}
                        onChangeText={(username) => this.setState({username})}
                        value={this.state.username} 
                        autoCorrect={false}
                    />
                    <TextInput 
                        style={styles.input}
                        onChangeText={(displayName) => this.setState({displayName})}
                        value={this.state.displayName} 
                        autoCorrect={false}
                    />
                </View>
                <View>
                    <Button title="Sign Up" onPress={this.handleSignUp}>Sign Up</Button>
                </View>
            </View>
        )
    }
}

export default connect()(SignUpForm)

类注册表单扩展组件{
静态类型={
}
状态={
电子邮件：“”，
密码：“”，
用户名：“”，
显示名称：“”
}
handleSignUp（）{
//要在此处调用handleAuthWithFirebase（this.state）。
}
渲染（）{
console.log（this.props）；
返回(
this.setState（{email}）}
值={this.state.email}
自动更正={false}
/>
this.setState（{password}）}
值={this.state.password}
自动更正={false}
/>
this.setState（{username}）}
值={this.state.username}
自动更正={false}
/>
this.setState（{displayName}）}
值={this.state.displayName}
自动更正={false}
/>
注册
)
}
}
导出默认连接（）（注册表单）

它向我展示了当我

console.log（this.props）

---

但是当我尝试在

handleSignUp

方法中执行

this.props.dispatch（handleAuthWithFirebase（this.state））

时，我得到一个错误，即props是

未定义的

，这是因为回调有自己的作用域，因为它是一个命名函数。只需将其绑定在按钮中，如下所示：

<Button title="Sign Up" onPress={this.handleSignUp.bind(this)}>Sign Up</Button>

注册

---

这是因为当从不同的上下文调用函数时，函数的作用域会发生变化，除非您将函数显式绑定到某个

this

。你需要它才能进入道具。除此之外，您的代码看起来很好，但如果您在修复时遇到任何问题，请告诉我

这是因为回调有自己的作用域，因为它是一个命名函数。只需将其绑定在按钮中，如下所示：

<Button title="Sign Up" onPress={this.handleSignUp.bind(this)}>Sign Up</Button>

注册

---

这是因为当从不同的上下文调用函数时，函数的作用域会发生变化，除非您将函数显式绑定到某个

this

。你需要它才能进入道具。除此之外，您的代码看起来很好，但如果您在修复时遇到任何问题，请告诉我

当您将组件连接到商店时，

dispatch

将作为道具传递给您的组件

在

handleSignUp

中，您可以执行以下操作：-

  handleSignUp () {
     const {dispatch} = this.props
     //input validations
     const newUser = this.state
     dispatch(handleAuthWithFirebase(newUser)) 

  }

对于按钮，您还需要绑定此。这可以在按钮中完成

注册

或者在构造函数中

constructor(){
   super()
   this.this.handleSignUp = this.handleSignUp.bind(this)
}

---

当您将组件连接到商店时，

dispatch

将作为道具传递给您的组件

在

handleSignUp

中，您可以执行以下操作：-

  handleSignUp () {
     const {dispatch} = this.props
     //input validations
     const newUser = this.state
     dispatch(handleAuthWithFirebase(newUser)) 

  }

对于按钮，您还需要绑定此。这可以在按钮中完成

注册

或者在构造函数中

constructor(){
   super()
   this.this.handleSignUp = this.handleSignUp.bind(this)
}