React Native按钮在setState更改后仍然可见但不可触摸

Question

我有一个呈现方法，用于检查状态中的数组长度，并在长度> 0时显示一个按钮。单击该按钮会将状态数组值更改回[]。

单击该按钮会重置数组值，状态会发生变化，并重新呈现视图。但该按钮在视图中保持可见，但不可触摸，位于其他元素后面，我甚至无法检查调试。它基本上只是一个神器。

很确定我错过了一个简单的反应状态/渲染的概念。有什么想法吗？谢谢。

下面是渲染代码：

render() { 
return (
    <Container theme={theme} style={{ backgroundColor: '#000000' }}> 
    <View style={styles.mapView}> 
     <MapView style={styles.map} 
     mapType='satellite' 
     showsUserLocation={true} 
     showsCompass={true} 
     followsUserLocation={false} 
     onLongPress={(e) => this.onMapLongPress(e)} 
     initialRegion={{ 
      latitude: 34.186129, 
      longitude: -84.546111, 
      latitudeDelta: 0.0012, 
      longitudeDelta: 0.0012, 
     }}> 
     {this.state.mapMarkers.map(marker => (
     <MapView.Marker 
      key={marker.key} 
      coordinate={marker.coordinate} 
      draggable 
      centerOffset={{ x: 0, y: -50 }} 
      onDragEnd={(e) => this.onMarkerEndDrag(e, marker.key)} 
     > 
      <TargetMarker distance={this.calculateTargetDistance(marker.coordinate.latitude, marker.coordinate.longitude)} metric={this.state.distanceUnitMetric.toUpperCase()} /> 
     </MapView.Marker> 
    ))} 
     { this.state.mapMarkers.length > 0 ? (
      <Button style={styles.deleteTargetButton} onPress={() => this.setState({mapMarkers: [] })}> 
       <Icon name="delete-forever" size={30} color={GOLD_COLOR}/> 
      </Button> 
     ) : null 
     } 
     </MapView> 
    </View> 
    </Container> 
); 
} 

Answer 1

渲染通常需要返回一个组件或空，所以也许尝试明确该组件设置为空时，它不应该渲染？所以像这样：

{ this.state.mapMarkers.length > 0 ? (
    <Button style={styles.deleteTargetButton} onPress={() => this.setState({mapMarkers: [] })}> 
     <Icon name="delete-forever" size={30} color={GOLD_COLOR}/> 
    </Button> 
) : null }