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

Posted 2023-03-05

【中文标题】为啥在 react-bootstrap 中映射图像显示错误（重复输出）

【英文标题】：Why Mapping an Image in react-bootstrap show bug (duplicate output)为什么在 react-bootstrap 中映射图像显示错误（重复输出）

【发布时间】：2021-11-17 09:21:09

【问题描述】：

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

【问题讨论】：

也许您可以将此代码复制到 running 代码框中；在您共享的特定代码 sn-p 中，我没有看到任何会导致一次渲染超过 4 个图像的明显问题。 Facilities 是否被多次渲染？

【参考方案1】：

很可能在Col 中使用key 属性会导致意外行为，因为所有键都是相同的。 Here 解释了何时在代码中使用keys 并为keys 做出反应docs。

一旦我从Col 和div 中删除了密钥，所有代码都将呈现结果而不会重复。 sandbox link 基于您的代码。