react-native - 无法调用从 React Native Iphone App 获取 API 的函数

Question

我有一个 React Native Iphone App。这里我需要调用一个 API 来注册用户并将数据存储到 mysql 数据库。下面是 API 存储类

注册.js：

import { AsyncStorage } from '@react-native-community/async-storage';

export const REGISTER = 'REGISTER';

export const register = (Username,Phonenumber,Email,Password) => {

return async dispatch =>{

 const response = await fetch(
   'https:................/registration',
   {
    method: 'POST',
    header: {
      'Content-Type': 'application/json',
      
    },
    body: JSON.stringify({
     txtUname: Username, 
     txtUmobile: Phonenumber,
     txtUemail: Email,
     txtUpass: Password
    })      
   }
 );
 }
 };

下面是调用上述 API 的类

注册.js

import React,{useState,useEffect,useReducer,useCallback} from 'react';
import { ScrollView,
Alert,
KeyboardAvoidingView,
StyleSheet,
View,
Image,
ActivityIndicator,
Text,Linking,
Dimensions
} from 'react-native';
import Button from 'apsl-react-native-button'
import Input from '../../components/UI/Input';
import Card from '../../components/UI/Card';
import { LinearGradient } from 'expo-linear-gradient';
import { useDispatch} from 'react-redux';
import Colors from '../../constants/Colors';
import * as registerActions from '../../store/actions/registration';

const FORM_INPUT_UPDATE = 'FORM_INPUT_UPDATE';

const formReducer = (state, action) => {
if (action.type === FORM_INPUT_UPDATE) {
const updatedValues = {
  ...state.inputValues,
  [action.input]: action.value
};
const updatedValidities = {
  ...state.inputValidities,
  [action.input]: action.isValid
};
let updatedFormIsValid = true;
for (const key in updatedValidities) {
  updatedFormIsValid = updatedFormIsValid && updatedValidities[key];
}
return {
  formIsValid: updatedFormIsValid,
  inputValidities: updatedValidities,
  inputValues: updatedValues
};
}
return state;
};

const SignUp = props =>{
const [isLoading,setIsLoading] = useState(false);
const [error, setError] = useState();
const dispatch = useDispatch();
const [formState, dispatchFormState] = useReducer(formReducer, {
inputValues: {
  Username: '',
  Phonenumber:'',
  Email:'',
  ConfirmPassword: '',

},
inputValidities: {
  Username: false,
  Phonenumber:false,
  Email:false,
  ConfirmPassword: false
},
formIsValid: false
}); 

 const inputChangeHandler = useCallback(
(inputIdentifier, inputValue, inputValidity) => {
  dispatchFormState({
    type: FORM_INPUT_UPDATE,
    value: inputValue,
    isValid: inputValidity,
    input: inputIdentifier
  });
  },
  [dispatchFormState]
   ); 

  const signUpHandler =   () => {
  let action =  registerActions.register(
           formState.inputValues.Username,
           formState.inputValues.Phonenumber,
           formState.inputValues.Email,
          formState.inputValues.ConfirmPassword
           );

   setError(null);
   setIsLoading(true);
       try{
          dispatch(action);
        Alert('User Registered');
         // props.navigation.navigate({routeName:'App'});
         
       } catch(err){
         setError(err.message);
         console.log(err.message);
        setIsLoading(false);
       }
   }; 

   return(
    <KeyboardAvoidingView
    behavior="padding"
    keyboardVerticalOffset={50}
    style={styles.screen}
  >
    <LinearGradient 
   
    colors={['orange', 'brown']} 
    style={styles.gradient}>
      
     
      <Card style={styles.authContainer}>
        <ScrollView>
        
           <Input
            id="Username"
            label="User Name"
            keyboardType="default"
            
            autoCapitalize="words"
            //errorText="Please enter a valid email address."
            onInputChange={inputChangeHandler}
            initialValue=""
            />
             <Input
            id="Phonenumber"
            label="Phone number"
            keyboardType="numeric"
            errorText="Please enter a valid phone number."
            onInputChange={inputChangeHandler}
            initialValue=""
          /> 
          {/* <Ionicons name="ios-mail" size={40} /> */}
          <Input
            id="Email"
            label="Email Id"
            keyboardType="default"
            errorText="Please enter a valid email."
            autoCapitalize="none"
           onInputChange={inputChangeHandler}
            initialValue=""
          /> 
          <Input
            id="Password"
            label="Password"
            keyboardType="default"
            secureTextEntry
            required
            minLength={3}
            autoCapitalize="none"
            errorText="Please enter a valid password."
          onInputChange={inputChangeHandler}
            initialValue=""
          /> 
           <Input
            id="ConfirmPassword"
            label="Confirm Password"
            keyboardType="default"
            secureTextEntry
            required
            minLength={3}
            autoCapitalize="none"
            errorText="Please enter a valid password."
          onInputChange={inputChangeHandler}
            initialValue=""
          /> 
          {/* <Ionicons name="ios-lock" size={40}  /> */}
          <View style={styles.buttonContainer}>
            
       

      {isLoading ? (
              <ActivityIndicator  size='large' color={Colors.primary}/>
            ):(
  <Button style={{backgroundColor: 'red'}} textStyle={{fontSize: 18}} 
  onPress = {signUpHandler}
   >
  Sign Up
  </Button>

  )}


  <Text>
  Go To Login Page
  </Text>

 </View>
 </ScrollView>
 </Card>
 </LinearGradient>
 </KeyboardAvoidingView>
 )}

 const styles = StyleSheet.create({
 button: {
 backgroundColor: 'white',
 height: 70,
 marginHorizontal: 20,
 borderRadius: 35,
 alignItems: 'center',
 justifyContent: 'center',
 marginVertical: 5,
 shadowOffset:{width:2,height:2},
 shadowColor:'black',
 shadowOpacity:0.2
 },
 screen: {
  flex: 1
 },
 gradient: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center'
 },
  authContainer: {
  width: '80%',
  maxWidth: 400,
  height:'60%',
  maxHeight: 500,
  padding: 20
 },
 ImageSytle:
 {
  alignSelf:'center',
  paddingBottom:50
 },
 buttonContainer: {
marginTop: 10
}
});


export default SignUp;

运行此代码后，我收到以下错误：

不能将类作为函数调用

我正在调用 signUpHandler 函数，但出现上述错误。谁能告诉我哪里出错了。在此先感谢。

标签： react-nativeapiexpo