Question

我正在使用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（）函数来刷新新记录的数据源。

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

Answer 2

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

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

component.forceUpdate(callback)

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

删除操作后，本机导航并刷新同一屏幕

2 个答案: