假设我有一个元素对象,我通过map循环并渲染。当我点击其中一个列表时,我希望该元素可以从渲染中隐藏。
Object.keys(this.state.doctors).map((uid, i) => { return (
<View style={styles.doctorContainer} key={uid}>
<View style={styles.imgCircleContainer}>
<View>
<Image style={styles.userImg} source={require( '../Images/Naseebullah.jpg')} resizeMode="contain" />
<View style={styles.imgOverlay} />
</View>
</View>
<View>
<Text style={{textAlign: 'center', fontSize: 15, color: '#bccad0'}}>{this.state.doctors[uid].name}</Text>
<Text style={{textAlign: 'center', fontSize: 12, color: 'rgba(188, 202, 208, 0.7)'}}>{this.state.doctors[uid].profession}</Text>
</View>
<TouchableOpacity style={styles.folllowBtn} onPress={()=> Database.followDoctor( this.state.doctors[uid].name, this.state.doctors[uid].profession, uid, this.state.type, this.state.healthAlert )}>
<Text style={{color: 'white', fontSize: 13, fontWeight: 'bold', textAlign: 'center'}}>Follow</Text>
</TouchableOpacity>
</View>
) })
所以当在{onxress上调用Database.followDoctor()
时。该元素应隐藏。不是整个清单。怎么能实现这一目标?
我来自angularjs背景,其中我们有角度,称为局部变量分配给循环中的每个元素,我们可以调节它。但是如何通过原生反应实现这一目标呢?
方法followDoctor()没有帮助,因为它是一种与firebase服务器通信的方法
static followDoctor(msgTo, profession, uid, type, healthAlert) {
User().then(user => {
firebase.app().database().ref(`/Users/${user.uid}/Doctors/${uid}`).set({
name: msgTo,
profession: profession
}).then(() => {
console.log("successfully added to DoctorsList!");
this.initialiseMessagesDB(msgTo, healthAlert, uid).then(() => {
//this.setMessage(uid, type);
})
//this.setMessage(uid, type, healthAlert, userName);
}).catch(e => console.log(e));
});
}
问题在于onPress功能。如果我们可以以某种方式在按钮的onPress()函数中执行某些操作并隐藏元素,那么它会很棒。
问题不在于我无法将其过滤掉。实际上,我当前的实现确实会过滤掉它们。但问题是在点击事件和隐藏元素之间的时间。因为点击甚至会进入firebase并附加对象(将医生添加到对象中),因此会产生几毫秒的延迟。我想在点击它时立即隐藏元素,在后台我会进行firebase检查,什么不是。
答案 0 :(得分:1)
我认为您需要将其从列表中过滤掉。在名为visible
的对象中创建一个布尔值,并在filter
之前应用map
方法,例如:
Object.keys(this.state.doctors).filter(uid => uid.visible).map((uid, i) => { return (
然后当你拨打Database.followDoctor()
时,你切换那个标志。
如果您不希望这些标记存储在您的数据库中,那么您可以在从数据库加载并在保存之前将其剥离时将它们添加到数据(最初设置为 true )。