表单提交后的实时视图更新与本机反应

Posted 2021-03-26

我的应用程序上有一个页面，显示用户发表的评论。当点击编辑注释时，会打开一个模态，用户可以在其中对其注释进行编辑并成功提交到数据库。现在我的问题是用户在看到他们刚刚做的更新之前不必刷新页面。我希望在视图中更新已编辑的文本

视图

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

每当我在我的数据库中更改一个东西，我希望用户看到我调用此方法。