React中Bootstrap网格卡片重复显示同一元素问题求助

你的问题出在循环逻辑颠倒：当前代码对每一个beer生成一个完整的Row，然后在这个Row里重复4次当前beer的卡片，导致每行都是同一个元素，同时还会生成和beers数量相同的冗余行。

正确逻辑 #

应该用一个Row包裹所有beer对应的Col，利用Bootstrap栅格系统自动将元素按每行4个排列（超出自动换行）。

修改后的代码 #

import React from "react";
import Navbars from "./Navbars";
import Card from "react-bootstrap/Card";
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';


const Beers = ({ beers }) => {
  return (
    <div>
      <Navbars />
      {/* 单个Row包裹所有Col，xs={1}表示小屏每行1个，md={4}表示中屏及以上每行4个 */}
      <Row xs={1} md={4} className="g-4">
        {/* 遍历beers数组，每个beer生成一个独立的Col和Card */}
        {beers.map((beer, idx) => (
          <Col key={idx}>
            <Card>
              <Card.Img variant="top" src={beer.image_url} alt={beer.name} />
              <Card.Body>
                <Card.Title>{beer.name}</Card.Title>
                <Card.Text>
                  {beer.tagline}
                </Card.Text>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default Beers;

关键修改点 #

1. 移除了beers.map外层的Row循环，只保留一个全局Row
2. 直接在Row内部遍历beers，每个beer对应唯一的Col和Card
3. 给循环的Col加上key={idx}（如果beer有唯一id属性，用beer.id替代idx更好）
4. 优化了Card.Img的alt属性，使用beer.name提升可访问性

内容的提问来源于stack exchange，提问作者Daniela Maria