时间戳

首页 > 解决方案 > 在本机反应中切换数组项？

arrays - 在本机反应中切换数组项？

问题描述

这基本上是一张带有建筑物图标的地图，当您点击建筑物时，它会显示该建筑物的信息。我正在为切换数组中的单个项目（buldings）的逻辑而苦苦挣扎。例如，仅显示建筑物 1。因此，当我点击标记时，它应该在数组中显示正确的建筑物。我正在展示 mapscreen.js 的部分代码，但如果需要，我会分享所有代码。

建筑物.js

export const buildings = [
  {
    name: "Building1",
    description: "This is some information",
    xp: 25,
  },
  {
    name: "Building2",
    description: "This is some information.",
    xp: 25,
  },
];

Mapscreen.js

const [visible, setVisible] = useState(false);

//MAP THROUGH ARRAY, PASS ARRAY ITEMS AS PROPS TO OVERLAY COMPONENT 

const myBuilding = buildings.map((building, i) => (
    <OverlayBox key={i} title={building.name} info={building.description} xp={building.xp} />
  ));
  const toggleOverlay = () => {
    setVisible(!visible);
  };


return (
    <View>
      <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
        {myBuilding}**<--------DISPLAYS BOTH BUILDINGS RIGHT NOW**
      </Overlay>

      <Marker
          onPress={toggleOverlay}**<--------WANT TO DISPLAY BUILDING 1**
          coordinate={{ latitude: 34.0198536, longitude: -80.923467 }}
          title={"Building1"}
          description={"25 XP"}
        />
      <Marker
          onPress={toggleOverlay}**<--------WANT TO DISPLAY BUILDING 2**
          coordinate={{ latitude: 34.0195536, longitude: -80.924467 }}
          title={"Building2"}
          description={"25 XP"}
        />
</View>

标签： arraysreactjsreact-nativeconditional-statementstoggle

解决方案

你的方法有点奇怪

我建议你：

  1. 只制作一个 OverlayBox

  2. 传递给toggleOverlay你的建筑物的索引，比如

    <Marker onPress={() => toggleOverlay(0)}

  3. 将可见的建筑物索引设置为状态

    const toggleOverlay = (index) => { setVisibleBuilding(index); ... };

  4. 并将建筑物传递给您的 OverlayBox，例如

    <OverlayBox building={buildings[visibleBuildingIndex]} ... />

推荐阅读