时间戳

首页 > 解决方案 > 为什么在 react-bootstrap 中映射图像显示错误（重复输出）

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

问题描述

大家好，我正在尝试在 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

标签： htmlreactjsreact-bootstrap

解决方案

由于所有键都是相同的，因此很可能在 中使用keyprop会导致意外行为。以下是关于何时在代码中使用以及对.Colkeyskeys

一旦我从Coland中删除了键div，所有代码都将呈现结果而不会重复。沙盒链接基于您的代码。

推荐阅读