导航回屏幕时，React本机元素Button Group按钮消失

如何解决导航回屏幕时，React本机元素Button Group按钮消失

我一直试图找出我在这里做错了什么，但我做不到。我有两个屏幕，分别从数据库中提取数据，然后单击一个项目（类别）。然后，当按下某个单词时，该项目（类别）会从我的数据库中提取更多数据。我必须在Viewcategory屏幕上为用户提供两个选择。他们可以按向后箭头以返回并从其他类别中选择更多项目，或者可以单击下一步按钮将其带到另一个屏幕。我遇到的问题是当我按后退箭头，然后返回以选择另一个类别时。选择该类别后，下一个按钮消失。除非我重新加载整个项目，否则它不会重新出现。

这是菜单WS的第一个屏幕

constructor(props) {
        super(props);
        this.state = {
            restaurantlocationcode: '',dataSource: [],}
        this.updateIndex = this.updateIndex.bind(this)
    }

    updateIndex (selectedindex) {
        this.setState({selectedindex})
        this.viewMenu(selectedindex)
    }

    render() {

        const buttons = ['Menu']
        const { selectedindex } = this.state

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

                <Input
                    style={styles.Input} 
                    placeholder='Restaurant Location Code'
                    leftIcon={
                        <Icon
                        name='location-arrow' 
                        size={24}
                        color='black'
                        />
                    }
                    onChangeText={ (restaurantlocationcode) => this.setState({restaurantlocationcode})}
                    value={this.state.restaurantlocationcode}
                    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()}
                    renderItem={({item,index}) => (
                        <ListItem
                        titleStyle={{ color: 'black',fontWeight: 'bold'}}
                        title={`${item}`}
                        onPress={() => this.viewCategory(item)}
                        bottomDivider
                        chevron
                        />
                    )}
                />

            </View>
        )
    }

    viewMenu = (index) => {
        if (index === 0) {
            let rlc = {
                restaurantlocationcode: this.state.restaurantlocationcode,};
            
            fetch('URL',{
                method: 'POST',body: JSON.stringify(rlc),headers: {
                    'Accept': 'application/json','Content-Type': 'application/json',},})
                .then((response) => response.json())
                .then((responseJson) => {
                    this.setState({
                        dataSource: responseJson,});
                    console.log(responseJson)
                    
                })
                .catch((error) => {
                    console.log(error);
                });
        }
    }
    
    viewCategory = (item) => {
        
        fetch('URL',{
            method: 'POST',body: JSON.stringify({
                category: item,restaurantlocationcode: this.state.restaurantlocationcode,}),headers: {
                'Accept': 'application/json',})
            .then((response) => response.text())
            .then((responseJson) => {
                this.setState({
                    dataSource: responseJson,});
                console.log(responseJson)
                
                this.setState({dataSource: []})
                this.props.navigation.navigate('ViewCategoryWS',{
                    food: responseJson,otherParam: '101',});
            })
            .catch((error) => {
                console.log(error);
            });
    }
}

在此屏幕上您可以查看每个类别中的项目（“查看类别”屏幕）

constructor(props) {
        super(props);
        const  { navigation } = this.props;
        const cust = navigation.getParam('food','No-User');
        const other_param = navigation.getParam('otherParam','No-User');
        const cust1 = JSON.parse(cust);
        const data = cust1.map(item => ({label: item,checked: false}));
        this.state = {
            dataSource: [],data,checked: null,selectedindex: 2,}
        this.updateIndex = this.updateIndex.bind(this)
    }

    updateIndex (selectedindex) {
        this.setState({selectedindex})
        this.nextScreen(selectedindex)
    }

    render() {
        const buttons = ['Next']
        const { selectedindex } = this.state
        const {data} = this.state;
        console.log(data);

        return (
            <View style={styles.container}>
                <BackButtonWS2 navigation={this.props.navigation} />
                
                <FlatList
                    data={data}
                    exTradata={this.state}
                    keyExtractor={(item,index) => index.toString()}
                    renderItem={({ item,index }) => (
                        <CheckBox 
                        center 
                        titleProps={{ color: 'black',fontWeight: 'bold'}}
                        title={item.label}
                        iconRight
                        checked={item.checked}
                        size={30}
                        onPress={() => this.onCheck(index,item.label)}
                        containerStyle={styles.checkBox} 
                        />    
                    )}
                />
                <ButtonGroup 
                onPress={this.updateIndex}
                selectedindex={selectedindex}
                selectedButtonStyle={{backgroundColor: 'blue'}}
                buttons={buttons}
                containerStyle={styles.buttonGroup}
                />
                

            </View>
        )
    }

    onCheck = (index,item) => {
        let {data} = this.state;
        data[index].checked = !data[index].checked;
        this.setState({data})
        this.state.dataSource.push([item]);
        //alert(this.state.dataSource);
        console.log(this.state.dataSource);
    }

    nextScreen = (index,item) => {
        if (index === 0) {
            this.props.navigation.navigate('UsersBill',{
                foodCat: this.state.dataSource,});
            alert(this.state.dataSource);   
        }
    }
}

这是我的后退按钮代码

  _back = () => {
        this.props.navigation.navigate('MenuWS',{
            food: 'food',});
    } 

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

我尝试使用goBack函数，但这只是将我带回到主屏幕，而不是我需要的屏幕。我还尝试将我选择的参数发送回菜单屏幕，以查看它是否只会重置而不会重置。我不确定到底发生了什么。有人遇到过这个问题吗？