Question

这是我第一次使用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组件，该组件获取少数<TextInput/>的用户信息。所以现在我想运行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)

当我dispatch

时，它告诉我console.log(this.props)可用作道具

但是当我尝试在this.props.dispatch(handleAuthWithFirebase(this.state))方法中执行handleSignUp时，我收到的错误是道具undefined

Answer 1

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

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

这样做的原因是，当从不同的上下文调用时，函数的范围会发生变化，除非您将函数显式绑定到某个this。您需要它才能访问道具。除此之外你的代码看起来很好，但是如果你在修复它时遇到任何麻烦，请告诉我。

Answer 2

当您将组件连接到商店时，dispatch将作为道具传递给您的组件。

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

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

  }

同样对于您的按钮，您需要绑定this。你可以按下按钮

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

或在构造函数

中

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

在React Native Redux中调度导入的函数

2 个答案: