如何从数组中获取一个匹配值？

Question

我正在尝试使用来自已点击的特定地图图钉的数据加载模态。我像这样渲染地图上的所有标记：

const [data, setData] = useState([]);


...


<MapView
          loadingEnabled={true}
          style={styles.mapView}
          showsUserLocation={true}
          region={{
            latitude: latitude,
            longitude: longitude,
            latitudeDelta: latitudeDelta,
            longitudeDelta: longitudeDelta,
          }}>
          {
            (markerArr = data.map((listing, index) => (
              <CustomMarker
                key={index}
                image={listing.pin}
                point={listing.point}
                category={listing.categoryID}
                place={listing.place}
                onPress={() => {
                  setModalVisible(true);
                }}
                coordinate={{
                  latitude: listing.latitude,
                  longitude: listing.longitude,
                }}
              />
            )))
          }
        </MapView>

我然后在按下单个标记时触发模态：

<Modal
          style={{ position: 'absolute', bottom: 10 }}
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            setModalVisible(!modalVisible);
          }}
          setModalVisiblity={() => {
            setModalVisible((preState) => (preState = !preState));
          }}>
          <Pressable
            style={{
              margin: 20,
              padding: 5,
              height: 120,
              shadowColor: '#000',
              shadowOffset: {
                width: 0,
                height: 5,
              },
              shadowOpacity: 0.34,
              shadowRadius: 6.27,

              elevation: 10,
            }}
            onPress={() => setModalVisible(!modalVisible)}>
            <Icon name="times-circle" size={20} />
          </Pressable>
          {data.map((listing, index) => (
            <TouchableOpacity onPress={() => onPressListingItem(listing)}>
              <MapListing
                key={index}
                name={listing.title}
                image={listing.pin}
                point={listing.point}
                photo={listing.photo}
                category={listing.categoryID}
                description={listing.description}
                place={listing.place}
                style={{
                  margin: 20,
                  padding: 5,
                  height: 120,
                  shadowColor: '#000',
                  shadowOffset: {
                    width: 0,
                    height: 5,
                  },
                  shadowOpacity: 0.34,
                  shadowRadius: 6.27,

                  elevation: 10,
                }}
                link={() => {
                  onPressListingItem(listing);
                }}
              />
            </TouchableOpacity>
          ))}
        </Modal>

在此模式中，我的 data.map(... 呈现数组中的所有项目。我希望它只呈现与触发它显示的图钉匹配的项目。任何有关如何执行此操作的帮助都会很棒。

Answer 1

您可以像使用 modalVisible

一样将所选项目存储在您的状态中

const [data, setData] = useState([]);
const [selectedMarker, setSelectedMarker] = useState(null)

const setSelectedMarker = (marker) => setSelectedMarker(marker)

  
const markerPressed = (marker) => {
  setModalVisible(true);
  setSelectedMarker(marker)
}

...


<MapView
          loadingEnabled={true}
          style={styles.mapView}
          showsUserLocation={true}
          region={{
            latitude: latitude,
            longitude: longitude,
            latitudeDelta: latitudeDelta,
            longitudeDelta: longitudeDelta,
          }}>
          {
            (markerArr = data.map((listing, index) => (
              <CustomMarker
                key={index}
                image={listing.pin}
                point={listing.point}
                category={listing.categoryID}
                place={listing.place}
                onPress={() => {
                  markerPressed(listing)
                }}
                coordinate={{
                  latitude: listing.latitude,
                  longitude: listing.longitude,
                }}
              />
            )))
          }
        </MapView>

<Modal
          style={{ position: 'absolute', bottom: 10 }}
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            setModalVisible(!modalVisible);
          }}
          setModalVisiblity={() => {
            setModalVisible((preState) => (preState = !preState));
          }}>
          <Pressable
            style={{
              margin: 20,
              padding: 5,
              height: 120,
              shadowColor: '#000',
              shadowOffset: {
                width: 0,
                height: 5,
              },
              shadowOpacity: 0.34,
              shadowRadius: 6.27,

              elevation: 10,
            }}
            onPress={() => setModalVisible(!modalVisible)}>
            <Icon name="times-circle" size={20} />
          </Pressable>
            <TouchableOpacity onPress={() => onPressListingItem(selectedMarker)}>
              <MapListing
                key={index}
                name={selectedMarker.title}
                image={selectedMarker.pin}
                point={selectedMarker.point}
                photo={selectedMarker.photo}
                category={selectedMarker.categoryID}
                description={selectedMarker.description}
                place={selectedMarker.place}
                style={{
                  margin: 20,
                  padding: 5,
                  height: 120,
                  shadowColor: '#000',
                  shadowOffset: {
                    width: 0,
                    height: 5,
                  },
                  shadowOpacity: 0.34,
                  shadowRadius: 6.27,

                  elevation: 10,
                }}
                link={() => {
                  onPressListingItem(selectedMarker);
                }}
              />
            </TouchableOpacity>
        </Modal>

如何从数组中获取一个匹配值？

How do I grab one matching value from an array?

jsx

react-native

react-native-maps