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 }