为什么在react-bootstrap中映射图像显示错误(重复输出)

Question

嗨，伙计们，所以我试图在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 Facilities = () => {
const [currentId, setCurrentId] = useState("1");
useEffect(() => {
console.log(currentId);
}, [currentId]);

const showSelectedFact = () => {
var fac = facsInfo.filter((x) => x.Id === currentId)[0];
const { Title, Description, Opentime, Id } = fac;
return (
<div key={Id}>
<h1 className="fontSB">{Title}</h1>
<p>{Description}</p><br></br>
<p><b>{Opentime}</b></p>
</div>
);
};
const showSelectedUpperImage = () => {
var fac = facsInfo.filter((x) => x.Id === currentId)[0];
const { upperleftimg, upperrightimg, Id } = fac;
return (
<>
<Col key={Id} className="facsImage text-center" md={12} lg={6}>
<img className="img-fluid" src={upperleftimg}></img>
</Col>
<Col key={Id} className="facsImage text-center" md={12} lg={6}>
<img className="img-fluid" src={upperrightimg}></img>
</Col>
</>
);
};

const showSelectedBottomImage = () => {
var fac = facsInfo.filter((x) => x.Id === currentId)[0];
const { bottomleftimg, bottomrightimg, Id } = fac;
return (
<>
<Col key={Id} className="facsImage text-center" sm={12} md={12} lg={6}>
<img className="img-fluid" src={bottomleftimg}></img>
</Col>
<Col key={Id} className="facsImage text-center" sm={12} md={12} lg={6}>
<img className="img-fluid" src={bottomrightimg}></img>
</Col>
</>
);
};  
return (
<>
<Container fluid>
<Row className="facsbuttwrapper text-center">
<Col sm={4} lg={4}>
<Button
value="1"
variant="custom"
onClick={(e) => setCurrentId(e.target.value)}
>
De'Spa
</Button>
</Col>
<Col sm={4} lg={4}>
<Button
value="2"
variant="custom"
onClick={(e) => setCurrentId(e.target.value)}
>
De'Resto
</Button>
</Col>
<Col sm={4} lg={4}>
<Button
value="3"
variant="custom"
onClick={(e) => setCurrentId(e.target.value)}
>
Meeting Room
</Button>
</Col>
</Row>
</Container>
<Container fluid>
<Row className="facsDetail fontReg">
<Col className="text-center" md={12} lg={12}>
{showSelectedFact()}
</Col>
</Row>
</Container>
<Container fluid>
<Row>
{showSelectedUpperImage()}
</Row>
</Container>
<Container fluid>
<Row>
{showSelectedBottomImage()}
</Row>
</Container>
</>
)
}
export default Facilities

Answer 1

很可能在Col中使用keyprop导致意外行为，因为所有的键都是相同的。以下是关于何时在代码中使用keys和keys的react文档中的一些解释。

一旦我从Col和div中删除了键，所有的代码都是没有重复的渲染结果。基于你的代码的沙盒链接。