反应显示响应json数据且不重置的本地平面列表项

问题描述

我有一个应用程序，可以从数据库中获取数据，并在屏幕A的一个平面列表中显示数字。选择一个数字后，它将打开，并在屏幕B的另一个平面列表中显示分配给该数字的所有用户。当我按下“后退”按钮返回上一屏幕（屏幕A）时，平面列表将显示响应Json数据（数组）而不是实际数字。我尝试使用goBack（），但由于使用的是列表，因此弄乱了应用程序的外观，但无法正常工作。另外，它不会转到我需要的屏幕，它带我回到主屏幕。

我试图使用Stackactions和navigationactions，但它一直给我错误消息。不确定在按下后退按钮后是否需要重置数据或导航堆栈，或者使用componentwillunmount。一切正常，我只是不明白为什么会显示响应数据而不是保留最初获取的数据。

这是屏幕A中的代码

render() {

        const buttons = ['View','Clear']
        const { selectedindex } = this.state

        
        return (
            <View style={styles.container}>
                <MenuButtonWS navigation={this.props.navigation} />
                
                <Input
                    style={styles.textInput} 
                    placeholder='User ID'
                    leftIcon={
                        <Icon
                        name='table' 
                        size={24}
                        color='black'
                        />
                    }
                    rightIcon={
                        <Icon 
                        name='chevron-left'
                        size={15}
                        color='black'
                        onPress={this._clearwaitstaffID}
                        />
                    }
                    onChangeText={ (waitstaffuserId) => this.setState({waitstaffuserId})}
                    value={this.state.waitstaffuserId}
                    underlineColorAndroid='transparent'
                />

                <ButtonGroup 
                onPress={this.updateIndex}
                selectedindex={selectedindex}
                selectedButtonStyle={{backgroundColor: 'blue'}}
                buttons={buttons}
                containerStyle={styles.buttonGroup}
                />
   
                <FlatList
                    data={this.state.dataSource}
                    exTradata={this.state}
                    keyExtractor={(item,index) => index.toString()}
                    //numColumns={numColumns}
                    renderItem={({item,index}) => (
                        <ListItem
                        titleStyle={{ color: 'black',fontWeight: 'bold'}}
                        title={`${item}`}
                        onPress={() => this._openTable(item)}
                        bottomDivider
                        chevron
                        />
                    )}
                />    
            </View>
        )
    }
    

这里是一种获取方法，一旦选择了其中一个号码，便会打开屏幕B并显示分配给该号码的用户。

_openTable = (item) => {
        
        fetch('URL',{
            method: 'POST',body: JSON.stringify({tablenumber: item}),headers: {
                'Accept': 'application/json','Content-Type': 'application/json',},})
            .then((response) => response.text())
            .then((responseJson) => {
                this.setState({
                    dataSource: responseJson,});
                console.log(responseJson)
                //alert(responseJson)
                this.props.navigation.navigate('ViewParty',{
                    party: responseJson,otherParam: '101',});
            })
            .catch((error) => {
                console.log(error);
            });
    }
    GetGridViewItem(uname) {
        Alert.alert(uname);
    }
}

这是屏幕B

render() {

        const  { navigation } = this.props;
        const cust = navigation.getParam('party','No-User');
        const other_param = navigation.getParam('otherParam','No-User');
        const cust1 = JSON.parse(cust);
        
        
        const data = cust1;
        console.log(data);

        return (
            <View style={styles.container}>
                <BackButtonWS navigation={this.props.navigation} />

                <FlatList
                    data={data}
                    exTradata={this.state}
                    keyExtractor={(item,index) => index.toString()}
                    //numColumns={numColumns}
                    renderItem={({ item,index }) => (
                        <ListItem
                        titleStyle={{ color: 'black',fontWeight: 'bold'}}
                        title={item}
                        onPress={() => this._checkoutuser(item)}
                        bottomDivider
                        chevron
                        /> 
                    )}
                />
            </View>
        )
    }

这是返回按钮的代码

 _back = () => {
        this.props.navigation.navigate('Tables')
    } 

    render() {
        return(
            <Icon 
                name='arrow-left'
                color="#000000"
                size={25}
                style={styles.menuIcon}
                onPress={() => this._back()}
            />
        )
    }
}

我觉得解决这个问题太简单了，我只是不能将手指放在上面。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）