React Native 与 Redux Form 提交表单并显示加载微调器

Question

我对 React Native 很陌生，我正在用它构建我的第一个应用程序。至于现在我可以使用 Redux-Form 登录我的 API，现在我想在登录过程中添加一个加载微调器。

为此，我正在使用这个库，它可以很容易地添加spiiner React Native Loading Spinner Overlay

问题是，当我点击登录按钮时，只有微调器显示，实际的登录功能永远不会执行，如果我删除微调器，则登录工作。

这是我的代码：

import React, { Component } from 'react'
import { Form, Field, reduxForm } from 'redux-form';
import { StyleSheet, View, Text, TextInput, Button, Image } from 'react-native'
import Spinner from 'react-native-loading-spinner-overlay';
import TInput from './TInput'

class LoginScreen extends Component {
    state = {
        loading: false,
    };
    constructor(props){
        super(props);
        this.state = {
            show: false
        };
    }
    loginEndpointDecider = () => {
        this.setState({show: true})  ;
    }
    showLogin(props){
        let { onLogin, onLogout, onUser, handleSubmit, auth } = props
        if(auth.access_token === '') {
            return (
            <View style={styles.container}>
                <Spinner
                //visibility of Overlay Loading Spinner
                visible={this.state.show}
                //Text with the Spinner
                textContent={'Iniciando Sesión...'}
                //Text style of the Spinner Text
                textStyle={styles.spinnerTextStyle}
                //Animation for the spinner
                animation={"fade"}
                />
                    <Image style={{width: 210, height: 55}} source={require('../resources/images/logo-wallet.png')}
                        />
                    <Field style={styles.input} autoCapitalize="none" placeholder="Cédula o RIF" component={TInput} name={'cedula'} />
                    <Field style={styles.input} autoCapitalize="none" placeholder="Clave" secureTextEntry={true} component={TInput} name={'password'} />
                    <Button
                        title = "Iniciar Sesión"
                        color = "#fab207"
                        style = {{backgroundColor:'#fab207'}}
                        onPress = {() => {
                            this.loginEndpointDecider();
                            handleSubmit(onLogin);
                        }}
                        />
            </View>
            )
        }
        else {
            return (
                <View style={styles.container}>
                    <Text>{auth.email}</Text>
                    <Button title="My Info" color= "#fab207" onPress={()=>onUser(auth)}/>
                    <Text style={{fontWeight:'bold'}}>{auth.name}</Text>
                    <Button title="Logout" color= "#fab207" onPress={()=>onLogout()}/>
                </View>
                )
        }

    }
    render(){
        return this.showLogin(this.props)
   }
}

export default reduxForm({ form: 'login' })(LoginScreen);

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    input:{
        height:40,
        width:300,
        padding:5,
        borderWidth:0,
        borderBottomWidth:2,
        borderBottomColor:'#fab207',
        borderColor:'#fff',
        margin:10
    },
    spinnerTextStyle: {
        color: '#FFF',
    },
})

我注意到问题出在

onPress = {() => {
            handleSubmit(onLogin);
          }}

如果我只做onPress = { handleSubmit(onLogin)}，那么它可以工作

Answer 1

在回答您的问题之前，我想提一下，在您定义的组件状态中两次。一次是state={}，第二次是Constructor，您可以将两个状态参数{loading:false, show:false} 作为其中之一。

现在关于您的问题：

onPress = { handleSubmit(onLogin)}

这种语法完全没问题，因为您将handleSubmit 函数作为道具传递并且您使用的是箭头函数语法。你可以在这里读更多关于它的内容： https://reactjs.org/docs/faq-functions.html#why-is-my-function-being-called-every-time-the-component-renders

我给你一个简单的例子来看看这里发生了什么：

import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';

class Test extends Component {

    handleSubmit=()=>{
        console.log('I am handleSubmit');
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                onPress={this.handleSubmit}
                />
            </View>
        );
    }
}

export default Test;

或者你可以定义你的handleSubmit函数如下但是它会改变你的onPress：

import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';

class Test extends Component {

    handleSubmit(){
        console.log('I am handleSubmit');
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                onPress={()=>this.handleSubmit()}
                />
            </View>
        );
    }
}

export default Test;

第三种旧的并且不是 ES6 语法的方式是绑定你的函数：

import React, {Component} from 'react';
import {View,TouchableOpacity} from 'react-native';

class Test extends Component {

    handleSubmit(){
        console.log('I am handleSubmit');
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                onPress={this.handleSubmit.bind(this)}
                />
            </View>
        );
    }
}

export default Test;

希望对您有所帮助。如果它对你有用，请投票给我:)