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

渲染通常需要返回组件或null，因此也许在不应该呈现时尝试将该组件明确设置为null？所以类似：

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