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

Question

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

Buildings.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>

Answer 1

你的做法有点奇怪

我建议你：

只制作一个OverlayBox
传递给toggleOverlay你的建筑物的索引喜欢

toggleOverlay(0)}
设置可见建筑索引状态如

const toggleOverlay = (index) => { setVisibleBuilding(索引); ... };
然后像
一样将建筑物传递给您的 OverlayBox

Answer 2

//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>
  );

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

Toggle an array item in react native?

arrays

toggle

conditional-statements

reactjs

react-native