如何解决反应显示响应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 举报,一经查实,本站将立刻删除。