Question

我有一个render方法，用于检查状态中的数组长度，如果长度为＆gt;则显示一个按钮。 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 }

React Native Button仍然可见但在setState更改后无法触摸

1 个答案: