删除操作后反应本机导航并刷新同一屏幕答案

【问题标题】：react native navigate and refresh same screen after delete operation删除操作后反应本机导航并刷新同一屏幕
【发布时间】：2018-06-18 07:17:50
【问题描述】：

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

    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中的代码移动到新方法中，从componentDidMount中调用，删除后也一样

标签： react-native react-navigation stack-navigator

【解决方案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);
        });
    }
}

【讨论】：

【解决方案2】：

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

默认情况下，当您的组件的状态或道具发生变化时，您的组件将重新渲染。如果你的 render() 方法依赖于一些其他数据，你可以通过调用 forceUpdate() 告诉 React 组件需要重新渲染

component.forceUpdate(callback)

调用forceUpdate() 将导致在组件上调用render()，跳过shouldComponentUpdate()。这将触发子组件的正常生命周期方法，包括每个子组件的shouldComponentUpdate() 方法。如果标记发生变化，React 仍然只会更新 DOM。

【讨论】：