javascript - 如何在React Native onPress中隐藏 map 函数中的单个元素？

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

因此，当 onPress 调用 Database.followDoctor() 时。该元素应该隐藏。不是整个列表。如何才能实现这一目标？

我来自 AngularJS 背景，其中 Angular 我们将所谓的局部变量分配给循环中的每个元素，并且我们可以对其进行调节。但是在 React Native 中如何实现呢？

编辑

方法 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 的对象中创建一个 bool 值，并在 map 之前应用 filter 方法 - 类似于:


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

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