Это требует, чтобы я вернулся и пришел снова, чтобы вставить новую запись

Question

Вот две проблемы:

Первое: у меня есть диалоговое окно с двумя TextInputs, из которого данные хранятся в базе данных, но проблема в том, что я не могу вставить одновременные записи, как это позволяет мне один раз вставить запись для второгозапись, я должен вернуться на предыдущую страницу, а затем вернуться, чтобы добавить еще одну.

Второй: когда запись вставлена, диалоговое окно с предупреждением отображается только на секунду и исчезает без нажатия кнопки ОК. мне нужно, чтобы диалоговое окно оставалось до нажатия кнопки ОК.

любезно помогите

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    ScrollView,
    TextInput,
    FlatList,
    ImageBackground,
    ActivityIndicator,
} from 'react-native';

import Dialog from "react-native-dialog";

export default class departments extends React.Component {

    static navigationOptions = {
        title: 'DEPARTMENTS',
        headerStyle: {
            backgroundColor: 'rgba(0,155,35,0.8)',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    };

    constructor(props) {
        super(props);
        this.state = {
            noteArray: [],
            isLoading: true,
            dataSource: [],
        }
    }

    componentDidMount() {
        return fetch('http://10.211.55.5/obe_services/api/showDepartments')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson,
                })
            })
    }

    showDialog = () => {
        this.setState({ dialogVisible: true });
    };
    handleCancel = () => {
        this.setState({ dialogVisible: false });
    };

    addNote = () => {
        this.state.noteArray.push({
            'DepartmentName': this.state.departmentName,
            'HOD': this.state.hodName,
        });

        this.setState({ dialogVisible: false });

        fetch('http://10.211.55.5/obe_services/api/insertDepartment', {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'

            }, body: JSON.stringify(this.state.noteArray[0])
        }).then((Response) => Response.json()).then((responseData) => {
            alert(responseData)
            this.componentDidMount()
        })

    }

    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                    <ActivityIndicator />
                </View>
            )
        }

        return (
            <ImageBackground
                source={require('/Users/ijaz/Desktop/FYP/OBE/Images/Backgrounds/bg3.jpeg')}
                style={styles.backgroundContainer}>
                <View style={styles.backgroundContainer}>
                    <FlatList
                        style={styles.scrollContents}
                        data={this.state.dataSource}
                        renderItem={({ item }) =>
                            <View style={{ width: '100%', height: 70, backgroundColor: 'rgba(171,73,53,0.2)', borderBottomWidth: 1, borderColor: 'green', paddingTop: 5, justifyContent: "center", }}>
                                <Text style={styles.departmentNameText}>{item.DepartmentName}</Text>
                                <Text style={styles.hodNameText}>HOD: {item.HOD}</Text>
                            </View>}
                        keyExtractor={(item, index) => index.toString()}>
                    </FlatList>

                    <TouchableOpacity
                        style={styles.addButton}
                        onPress={this.showDialog.bind(this)}>
                        <Text style={styles.addBtnText}>+</Text>
                    </TouchableOpacity>

                    <Dialog.Container visible={this.state.dialogVisible}>
                        <Dialog.Title>Add New</Dialog.Title>
                        <TextInput style={styles.textInput}
                            placeholder="Department Name"
                            placeholderTextColor='rgba(0,0,0,0.4)'
                            onChangeText={departmentName => this.setState({ departmentName })} />
                        <TextInput style={styles.textInput}
                            placeholder="HOD Name"
                            placeholderTextColor='rgba(0,0,0,0.4)'
                            onChangeText={hodName => this.setState({ hodName })} />
                        <Dialog.Button label="Cancel" onPress={this.showDialog2} />
                        <Dialog.Button label="Save" onPress={this.addNote} />
                    </Dialog.Container>

                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        height: '100%',
        width: '100%',
    },
    backgroundContainer: {
        flex: 1,
        width: '100%',
        height: '100%',
        resizeMode: 'stretch',
        justifyContent: "center",
        alignItems: "center",
    },
    scrollContents: {
        flex: 2,
        bottom: 0,
        width: '100%',
    },
    textInput: {
        alignSelf: "stretch",
        padding: 10,
        fontSize: 16,
        borderTopWidth: 2,
        borderTopColor: '#ededed',
        width: '100%',
    },
    addButton: {
        position: "absolute",
        zIndex: 11,
        right: 20,
        bottom: 20,
        backgroundColor: 'green',
        opacity: 0.8,
        width: 90,
        height: 90,
        borderRadius: 50,
        alignItems: "center",
        justifyContent: "center",
        elevation: 8,
    },
    addBtnText: {
        color: '#fff',
        fontSize: 44,
    },
    departmentNameText: {
        justifyContent: "center",
        fontWeight: "bold",
        fontSize: 16,
        color: 'black',
        opacity: 0.8,
        paddingStart: 10,
        //borderLeftWidth: 10,
        borderLeftColor: '#e91E63',
    },
    hodNameText: {
        justifyContent: "center",
        //fontWeight: "bold",
        fontSize: 14,
        color: 'black',
        opacity: 0.7,
        paddingStart: 10,
        //borderLeftWidth: 10,
        borderLeftColor: '#e91E63',
    },
});