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

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

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

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,shadowOffset: {
                    width: 0,}}
                link={() => {
                  onPressListingItem(listing);
                }}
              />
            </TouchableOpacity>
          ))}
        </Modal>

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

解决方法

您可以像使用 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,shadowOffset: {
                    width: 0,}}
                link={() => {
                  onPressListingItem(selectedMarker);
                }}
              />
            </TouchableOpacity>
        </Modal>