我的应用程序上有一个页面,显示用户发表的评论。当点击编辑注释时,会打开一个模态,用户可以在其中对其注释进行编辑并成功提交到数据库。现在我的问题是用户在看到他们刚刚做的更新之前不必刷新页面。我希望在视图中更新已编辑的文本
视图
{
postComments.map((item) => (
<ListItem
roundAvatar
hideChevron={true}
avatar={{uri:item.avatar}}
key={item.id}
title={item.author.member.firstname + ' ' + item.author.member.lastname}
subtitle={
<View >
<Text style={{paddingLeft:10, fontSize:16, color:'#4a4a4a', fontFamily:'HelveticaNeue-Light'}}>{item.text}</Text>
<View style={{position:'absolute',right:0, bottom:0}}>
<Text>
<Text
onPress={()=>callEditModal(item)}
style={{color:'#36a', fontSize:18}}>Edit | </Text>
</Text>
</View>
</View>
}
/>
))
}
<Modal
animationType="slide"
transparent={false}
visible={visible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.modalContainer}>
<Header
centerComponent={{ text: 'Edit Comment', style: { color: '#fff' } }}
rightComponent={{ icon: 'close', color: '#fff', onPress: () => closeEditModal(), }}
backgroundColor= '#00aae0'
containerStyle={{
top: -20,
}}
/>
<View >
<TextInput
value={userComment}
onChangeText={setEditComment}
style={{padding:10,backgroundColor:'#fafafa', height:150}}
mode="flat" multiline={true}
numberOfLines={2} label=''
/>
<Button style={{alignSelf:'flex-end',height:50, margin:10, justifyContent:"center", width:"40%"}}
icon="send"
type='material'
mode="contained"
color="#00aae0"
uppercase={false}
onPress={() => {saveComment()}} >
Save Edit
</Button>
</View>
</View>
</Modal>
功能
saveComment = () => {
alert(this.state.userComment);
}
我如何让我直播更新?
如果user wouldn't have to refresh the page
意味着不使用setState()
我怀疑它可能。你没有说你用什么类型的方法在app中存储数据。但是如果你使用任何数据库,在编辑之后更新数据库并从那里重新初始化你的视图(调用一个函数从app DB捕获数据并将数据置于状态中)。
我在反应原生中使用realm
,所以代码将是这样的:
updateState() {
const devs = realm.objects('user_devices');
this.setState({ devices: devs });
}
每当我在我的数据库中更改一个东西,我希望用户看到我调用此方法。