Arrays 在react native中切换数组项？

这基本上是一个有建筑图标的地图，当你点击一个建筑时，它会显示该建筑的信息。在数组中切换单个itemsbuldings时，我正在与逻辑斗争。例如，仅显示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);
  };

---

你的方法有点奇怪

我建议你：

只制作一个重叠框

传递以切换覆盖建筑的索引，如

切换覆盖0}

将可见建筑索引设置为状态，如

const toggleOverlay=索引=>{ 设置VisibleBuildingIndex； ... };

然后把大楼传给你的重叠盒子

---

你的方法有点奇怪

我建议你：

只制作一个重叠框

传递以切换覆盖建筑的索引，如

切换覆盖0}

将可见建筑索引设置为状态，如

const toggleOverlay=索引=>{ 设置VisibleBuildingIndex； ... };

然后把大楼传给你的重叠盒子

---

我正在更新我的代码，你是说在第一步我真的不需要映射？只需正确渲染一个覆盖，visiblebuildingIndex是什么？我更新了一些，但不确定方向是否正确？发布在前一个代码下面管理修复，如果需要，我将发布我的解决方案。您的方式正确，无需制作多个叠加框，但您可以映射建筑物以动态生成标记，只需存储坐标，建筑物数组中的颜色和瓦特数，最后确保在将叠加标记渲染为已解决之前设置建筑物索引，如果您愿意的话！我正在更新我的代码，你是说在第一步我真的不需要映射？只需正确渲染一个覆盖，visiblebuildingIndex是什么？我更新了一些，但不确定方向是否正确？发布在前一个代码下面管理修复，如果需要，我将发布我的解决方案。您的方式正确，无需制作多个叠加框，但您可以映射建筑物以动态生成标记，只需存储坐标，建筑物数组中的颜色和瓦特数，最后确保在将叠加标记渲染为已解决之前设置建筑物索引，如果您愿意的话！

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>

//ANSWER
  const [visibleBuilding, setVisibleBuilding] = useState(0);
  const buildings = [
    {
      name: "Building1",
      description:
        " This is some information.",
      xp: 25,
    },
    {
      name: "Building2",
      description: "This is some information.",
      xp: 25,
    },
  ];
  const [visible, setVisible] = useState(false);

  const toggleOverlay = () => {
    setVisible(!visible);
  };

  return (
    <View style={{ flex: 1 }}>
      <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
        <OverlayBox
          building={buildings[visibleBuilding]}
          onPress={() => toggleOverlay()}
          key={visibleBuilding}
          title={buildings[visibleBuilding].name}
          info={buildings[visibleBuilding].description}
          xp={buildings[visibleBuilding].xp}
        />
      </Overlay>
        <Marker
          onPress={() => {
            toggleOverlay();
            setVisibleBuilding(0);
          }}
          coordinate={{ latitude: 34.0198536, longitude: -80.923467 }}
          pinColor="maroon"
          title={"Rutledge"}
          description={"25 XP"}
        />
        

        <Marker
          onPress={() => {
            toggleOverlay();
            setVisibleBuilding(1);
          }}
          coordinate={{ latitude: 34.0195536, longitude: -80.924467 }}
          pinColor="maroon"
          title={"Swearingen Engineering Center"}
          description={"25 XP"}
        />
       
    </View>
  );