Question

我的应用程序上有一个页面，其中显示用户发表的评论。当点击“编辑评论”时，将打开一个模式，用户可以在其中编辑他/她的评论，并成功提交到数据库。现在我的问题是用户在看到更新之前不必刷新页面。我想在视图中更新编辑的文本

查看

  {
    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);
}

我如何进行实时更新？

Answer 1

如果user wouldn't have to refresh the page表示不使用setState()，我怀疑它是否可行。您没有说要使用哪种方法在应用程序中存储数据。但是如果您使用任何数据库，则在编辑后更新数据库并从那里重新初始化视图（调用函数以从应用程序数据库捕获数据并将数据置于例如状态）。

我在本机反应中使用realm，因此代码如下：

updateState() {
        const devs = realm.objects('user_devices');
        this.setState({ devices: devs });
    }

并且每当我在数据库中更改内容并希望用户看到我调用此方法时。

提交表单后使用实时响应更新Live View

1 个答案: