react-native - react native navigate and refresh same screen after delete operation

Question

I am using listView. In that List i can delete any record but after deletion i want listview to get refresh and show new record that means i want to call my componentDidMount(). I am using navigation.navigate() but it is not calling componentDidMount(). Below is my code snippet for reference.

    import React, { Component } from 'react';
    import { AppRegistry, StyleSheet, Keyboard , TouchableWithoutFeedback ,TextInput, ActivityIndicator, Picker, Switch, ListView,
    Text, View, Alert, Platform, ToastAndroid, TouchableHighlight, Image, Button, TouchableOpacity, ScrollView } from 'react-native';
    import EvilIcon from 'react-native-vector-icons/EvilIcons';
    import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
    import { StackNavigator } from 'react-navigation';
    import { NavigationActions } from 'react-navigation'
    import Toast from 'react-native-simple-toast';

    class manage_timeslots extends Component 
    {
            static navigationOptions = {
            title: 'Manage Timeslots',
        };

        constructor(props) {
            super(props);
            this.state = {
                isLoading: true,
                text: '',
                stat: '',
            }
            this.arrayholder = [];
        }
        componentDidMount() {
            const base64 = require('base-64');
            this._subscribe = this.props.navigation.addListener('didFocus', () => 
            {    console.log("in focus")
                fetch('APIURL'+this.props.navigation.state.params.campaign_id, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        "Authorization": "Basic " + base64.encode("demo:QZMWOL")
                    }
                })
                .then((response) => response.json())
                .then((responseJson) => {  console.log("timeslots: "+ JSON.stringify(responseJson));
                    let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
                    this.setState({
                        isLoading: false,
                        data : "data",
                        dataSource: ds.cloneWithRows(responseJson.Time_Slots),
                    }, function () { //console.log("timeslots: " + this.state.dataSource);
                    });
                })
                .catch((error) => {
                    // Alert.alert(error.toString())
                    this.setState({
                        isLoading: false,
                        data: "noDataFound"
                    })
                });
            });
        }

        onDeleteTimeSlot(Timeslot_id) {
            const base64 = require('base-64');
            fetch('APIURL'+Timeslot_id, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    "Authorization": "Basic " + base64.encode("demo:QZMWOL")
                }
            })
            .then((response) => response.json())
            .then((responseJson) => { console.log("response: " + JSON.stringify(responseJson));
                if(responseJson.Message == 'Data has been deleted successfully!')
                { console.log("here");
                    this.props.navigation.navigate('Eighth', { campaign_id: this.props.navigation.state.params.campaign_id, ClientId: this.props.navigation.state.params.ClientId, Ad_name: this.props.navigation.state.params.Ad_name }    );
                }
                else 
                {
                    console.log(responseJson);
                }
            }).catch((error) => {
                console.error(error);
            });
        }
    }

from onDeleteTimeSlot() i need to call componentDidmount() function again to refresh datasource for new records.

标签： react-nativereact-navigationstack-navigator

Answer 1

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Keyboard , TouchableWithoutFeedback ,TextInput, ActivityIndicator, Picker, Switch, ListView,
Text, View, Alert, Platform, ToastAndroid, TouchableHighlight, Image, Button, TouchableOpacity, ScrollView } from 'react-native';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import { StackNavigator } from 'react-navigation';
import { NavigationActions } from 'react-navigation'
import Toast from 'react-native-simple-toast';

class manage_timeslots extends Component 
{
        static navigationOptions = {
        title: 'Manage Timeslots',
    };

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            text: '',
            stat: '',
        }
        this.arrayholder = [];
    }

    componentDidMount() {
       this.getData()
    }

    getData() {
        const base64 = require('base-64');
        this._subscribe = this.props.navigation.addListener('didFocus', () => 
        {    console.log("in focus")
            fetch('APIURL'+this.props.navigation.state.params.campaign_id, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    "Authorization": "Basic " + base64.encode("demo:QZMWOL")
                }
            })
            .then((response) => response.json())
            .then((responseJson) => {  console.log("timeslots: "+ JSON.stringify(responseJson));
                let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
                this.setState({
                    isLoading: false,
                    data : "data",
                    dataSource: ds.cloneWithRows(responseJson.Time_Slots),
                }, function () { //console.log("timeslots: " + this.state.dataSource);
                });
            })
            .catch((error) => {
                // Alert.alert(error.toString())
                this.setState({
                    isLoading: false,
                    data: "noDataFound"
                })
            });
        });
    }

    onDeleteTimeSlot(Timeslot_id) {
        const base64 = require('base-64');
        fetch('APIURL'+Timeslot_id, {
            method: 'DELETE',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                "Authorization": "Basic " + base64.encode("demo:QZMWOL")
            }
        })
        .then((response) => response.json())
        .then((responseJson) => { console.log("response: " + JSON.stringify(responseJson));
            if(responseJson.Message == 'Data has been deleted successfully!')
            { console.log("here");
                this.getData()
            }
            else 
            {
                console.log(responseJson);
            }
        }).catch((error) => {
            console.error(error);
        });
    }
}