如何在React Native onPress中隐藏地图功能中的单个元素？

Question

假设我给了一个元素对象，该对象通过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> ) }) 

因此，当Database.followDoctor()调用onPress时。 该元素应该隐藏。 不是整个列表。 如何做到这一点？

我来自angularjs背景，其中angular我们为循环中的每个元素分配了所谓的局部变量，我们可以对其进行条件化。 但是如何在本地反应中实现呢？

编辑

方法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检查，什么不做。

Answer 1

我认为您需要将其从列表中过滤掉。 在名为visible的对象中创建一个布尔值，然后在map之前应用filter方法-类似于：

Object.keys(this.state.doctors).filter(uid => uid.visible).map((uid, i) => { return (然后，当您调用Database.followDoctor()将切换该标志。

如果您不希望将这些标志存储在数据库中，则可以在从数据库加载并在保存之前剥离它们时将它们添加到数据中（最初设置为true ）。