问题描述
我一直试图找出我在这里做错了什么，但我做不到。我有两个屏幕，分别从数据库中提取数据，然后单击一个项目（类别）。然后，当按下某个单词时，该项目（类别）会从我的数据库中提取更多数据。我必须在Viewcategory屏幕上为用户提供两个选择。他们可以按向后箭头以返回并从其他类别中选择更多项目，或者可以单击下一步按钮将其带到另一个屏幕。我遇到的问题是当我按后退箭头，然后返回以选择另一个类别时。选择该类别后，下一个按钮消失。除非我重新加载整个项目，否则它不会重新出现。
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函数，但这只是将我带回到主屏幕，而不是我需要的屏幕。我还尝试将我选择的参数发送回菜单屏幕，以查看它是否只会重置而不会重置。我不确定到底发生了什么。有人遇到过这个问题吗？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）