与React Native提交表单后的实时视图更新



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

查看

  {
    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 DB的数据并将数据放在状态下,例如)。

我在反应本机中使用 realm,因此代码就是这样:

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

每当我更改DB中的东西时,我希望用户看到我称之为此方法。

相关内容

  • 没有找到相关文章

最新更新