Javascript 在地图视图中使用Marker OnPress时视图未渲染

当我按下一个标记时，我试图在地图上弹出一个视图。我的代码如下

这是我的渲染方法

return (
      <View styles={styles.container}>
        {this.state.error && (
          <Text style={styles.errorText}>Error: {this.state.error}</Text>
        )}
        {this.state.mapReady && (
          <MapView
            provider={PROVIDER_GOOGLE}
            ref={map => (this.map = map)}
            showsUserLocation
            style={styles.userMap}
            initialRegion={this.state.initialRegion}
          >
            {this.renderVendorMarkers()}
          </MapView>
        )}
      </View>
    );
  }
}

---

有什么建议吗？我什么都试过了。视图甚至没有渲染，但我调用markerPress时没有收到任何错误。我更新了上面的代码。有什么建议吗？我什么都试过了。视图甚至没有渲染，但我调用markerPress时没有收到任何错误。我更新了上面的代码。

renderVendorMarkers = () => {
    const { vendorData } = this.state;
    if (vendorData) {
      return (
        <View>
          {vendorData.map((vendor, idx) => {
            return (<Marker
            key={idx}
            ref={ref => (this.state.markers[idx] = ref)}
            onPress={() => this.onMarkerPress(marker, idx)}
            coordinate={{
              latitude: marker.coordinates.lat,
              longitude: marker.coordinates.lng
            }}
          >
            <Callout>
              <Text>{marker.VendorName}</Text>
            </Callout>
          </Marker>
        );
      })}
    </View>
  );
}

   onMarkerPress = (location, index) => {
    return (
      <View style={styles.vendorContainer}>
        <Text>Vendor Data:{location.VendorName}</Text>
      </View>
    );
  };

const { width, height } = Dimensions.get("screen");

const styles = StyleSheet.create({
  container: { flex: 1 },
  vendorContainer: {
    flex: 1,
    height: 100,
    width: 200,
    position: "absolute",
    backgroundColor: "white"
  },
  userMap: { height: height },