嗨，伙计们，所以我试图在react-bootstrap中使用映射来显示我的图像。我有3个按钮，一旦这个按钮被用户点击，它将显示不同的信息和4个不同的图像。但在我的例子中，一旦我点击按钮，它将显示12个不同的图像。 我怎么才能修好这个？请帮帮我。

以下是我的数组数据:

const facsInfo = [
    {
        Id: "1",
        Title: "De'Spa",
        Description: "",
        upperleftimg:"./Images/DeSpa1.jpg",
        upperrightimg:"./Images/DeSpa1.jpg",
        bottomleftimg:"./Images/DeSpa1.jpg",
        bottomrightimg:"./Images/DeSpa1.jpg",
    },
    {
        Id: "2",
        Title: "De'Resto",
        Description:" ",
        upperleftimg:"./Images/DeResto1.jpg",
        upperrightimg:"./Images/DeResto2.jpg",
        bottomleftimg:"./Images/DeResto3.jpg",
        bottomrightimg:"./Images/DeResto4.jpg",
    },
    {
        Id: "3",
        Title: "Meeting Room",
        Description: "",
        Opentime:"Opening hours: 10.00 am – 8.00 pm",
        upperleftimg:"./Images/Room1.jpg",
        upperrightimg:"./Images/Room2.jpg",
        bottomleftimg:"./Images/Room3.jpg",
        bottomrightimg:"./Images/Room4.jpg",
    },
]

以下是我的facilities.js代码:

const facsInfo = [
    {
        Id: "1",
        Title: "De'Spa",
        Description: "",
        upperleftimg:"./Images/DeSpa1.jpg",
        upperrightimg:"./Images/DeSpa1.jpg",
        bottomleftimg:"./Images/DeSpa1.jpg",
        bottomrightimg:"./Images/DeSpa1.jpg",
    },
    {
        Id: "2",
        Title: "De'Resto",
        Description:" ",
        upperleftimg:"./Images/DeResto1.jpg",
        upperrightimg:"./Images/DeResto2.jpg",
        bottomleftimg:"./Images/DeResto3.jpg",
        bottomrightimg:"./Images/DeResto4.jpg",
    },
    {
        Id: "3",
        Title: "Meeting Room",
        Description: "",
        Opentime:"Opening hours: 10.00 am – 8.00 pm",
        upperleftimg:"./Images/Room1.jpg",
        upperrightimg:"./Images/Room2.jpg",
        bottomleftimg:"./Images/Room3.jpg",
        bottomrightimg:"./Images/Room4.jpg",
    },
]

顺晟科技：

很可能是由于所有键都是相同的，所以prop的使用导致了意外的行为。这里是关于何时在代码中使用和反应docsfor.

一旦我从and中移除键，所有代码都将呈现没有重复的结果。基于代码的沙箱链接。