React native 删除操作后，对本机导航和刷新同一屏幕作出反应

我正在使用listView。在该列表中，我可以删除任何记录，但在删除后，我希望listview得到刷新并显示新记录，这意味着我想调用我的componentDidMount。我正在使用navigation.navigate，但它没有调用componentDidMount。下面是我的代码片段供参考

    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);
            });
        }
    }

---

在onDeleteTimeSlot中，我需要再次调用componentDidmount函数来刷新数据源以获取新记录。

我认为您使用了错误的生命周期方法。componentDidmount只有在成功装入组件时才会执行。当您对数据进行更改时，不会卸载组件，然后重新装载以反映更改。为此，您需要使用更新生命周期方法，或者您甚至可以强制对组件进行更新

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);
        });
    }
}

默认情况下，当组件的状态或道具更改时，组件将重新渲染。如果渲染方法依赖于某些其他数据，则可以通过调用forceUpdate告知React组件需要重新渲染

component.forceUpdatecallback

---

调用forceUpdate将导致对组件调用render，跳过shouldComponentUpdate。这将触发子组件的正常生命周期方法，包括每个子组件的shouldComponentUpdate方法。React仍将仅在标记更改时更新DOM。

将componentDidMount中的代码移动到新方法，并从componentDidMount调用它，以及在删除后调用它