如何在React Native的独立组件中管理API调用？

Question

我是一个新的React nativei想管理API调用在单独的组件，组件调用从我们的设计组件下面是我的代码。

我想如果我在同一个组件中管理API Call，这将不是一个好的方法，这就是为什么我想在单独的组件中管理。

import * as React from 'react';
import {
    StyleSheet,Text,View,TextInput, Button,TouchableHighlight,Image,Picker,Alert,ScrollView
} from 'react-native';

import { validateAll } from 'indicative/validator'
export default class ContactInfo extends React.Component {

    constructor(props) {
        super(props)

    }
    state = {
        FirstName: '',
        LastName: '',
        Email: '',
        Suffix: '',
        MI: '',
        ID: '',
        BirthdayDate: '',
        Gender: '',
        AgeGroup: '',
        HomePhone: '',
        DaytimePhone: '',
        CellPhone: '',
        Address: '',
        CellProvider: '',
        City: '',
        Fax: '',
        State: '',
        ZipCode: '',
        error: {}
    }
       AddFamilyMember = async (data) => {
        try {
            const rules = {
                Address: 'required',
                City: 'required',
                State: 'required',
                ZipCode: 'required',
            }
            const messages = {
                required: 'Required',
                email: 'The email is invalid.',
                max: '{{ field }} should be less than 20 character.'
            }
            var personInfo = await this.GetPersonalInfo();
            if (personInfo == false) {
                return false;
            }
            await validateAll(data, rules, messages);
            this.setState({
                isLoading: true
            })
            var url = global.DomainName + 'api/Customers/AddFamilyMember?addFamilyMember=FamilyMember';
            await fetch(url, {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    FirstName: this.state.FirstName,
                    LastName: this.state.LastName,
                    Email: this.state.Email,
                    Suffix: this.state.Suffix,
                    MI: this.state.Initail,
                    ID: '',
                    BirthdayDate: this.state.DateofBirth,
                    Gender: this.state.Gender,
                    AgeGroup: this.state.AgeGroup,
                    HomePhone: this.state.HomePhone,
                    DaytimePhone: this.state.DaytimePhone,
                    CellPhone: this.state.CellPhone,
                    Address: this.state.Address,
                    CellProvider: this.state.CellProvider,
                    City: this.state.City,
                    Fax: this.state.Fax,
                    State: this.state.State,
                    ZipCode: this.state.ZipCode,
                    PersonId: await AsyncStorage.getItem('LoginUserID')
                })
            }).then((response) => response.json())
                .then(responseJson => {
                    if (responseJson.Message != "") {


                        Alert.alert("", responseJson.Message)
                        this.setState({
                            isLoading: false
                        })
                        this.props.navigation.dispatch(
                            CommonActions.navigate({
                                name: 'CurrentFamilyMembers',

                            })
                        );

                    }
                }).catch(error => {
                    this.setState({
                        isLoading: false
                    })
                });
        }
        catch (errors) {
            const formattedErrors = {}
            errors.forEach(error => formattedErrors[error.field] = error.message);
            this.setState({
                error: formattedErrors
            })
        }
    } 



    render() {

        return (
            <View style={styles.container}>
                <ScrollView>
                    <Loader loading={this.state.isLoading} />
                    <View style={{ flex: 1, marginTop: '10%' }}>

                        <View style={styles.inputContainer}>
                            <View style={styles.inputInnerContainer}>
                                <TextInput style={styles.inputs}
                                    placeholder="Cell Phone"
                                    keyboardType="number-pad"
                                    maxLength={12}
                                    value={this.state.CellPhone}
                                    onChangeText={(CellPhone) => this.setState({ CellPhone })}
                                />
                            </View>

                        </View>

                        <View style={styles.inputContainer}>
                            <View style={styles.inputInnerContainer}>
                                <TextInput style={styles.inputs}
                                    placeholder="Home Phone"
                                    keyboardType="number-pad"
                                    maxLength={13}
                                    value={this.state.HomePhone}
                                    onChangeText={(HomePhone) => this.setState({ HomePhone })}
                                />
                            </View>

                        </View>

                        <View style={styles.inputContainer}>
                            <View style={styles.inputInnerContainer}>
                                <TextInput style={styles.inputs}
                                    placeholder="Zip Code"
                                    underlineColorAndroid='transparent'
                                    keyboardType='numeric'
                                    maxLength={5}
                                    value={this.state.ZipCode}

                                    onChangeText={(ZipCode) => this.setState({ ZipCode })}
                                />
                            </View>
                            <View >
                                {
                                    this.state.error['ZipCode'] && <Text style={styles.ErrorMessage}>{this.state.error['ZipCode']}</Text>
                                }
                            </View>
                        </View>


                        <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() => this.AddFamilyMember(this.state)} >
                            <Text style={styles.loginText}>Next</Text>
                        </TouchableHighlight>


                    </View>
                </ScrollView>
            </View>


        );

    }

}

在我上面的代码中，我想在Separate组件中管理 "AddFamilyMember "功能。

Answer 1

api.js

export const AddFamilyMember = async (url) => {
  let res = await fetch(url)
  // res = .....
  return res
}

import {AddFamilyMember } from './api';

const res = await AddFamilyMember(url)