React-Bootstrap如何设置每行显示4张卡片？代码报错求助

看起来你在布局卡片的时候踩了几个常见的坑，我帮你逐一排查并修正：

首先，直接导致报错的问题：未导入Row和Col组件 #

你在代码里用了<Row>和<Col>，但没有从react-bootstrap导入它们，这会直接抛出"Row is not defined"或"Col is not defined"的错误。先把导入补上：

import { Card, Button, Row, Col } from 'react-bootstrap';
// 去掉没用的CardGroup，我们用Grid系统来控制布局

布局结构逻辑错误 #

你的代码里有几个核心问题：

• 用CardGroup套Row是冗余的，Bootstrap的Grid系统（Row+Col）已经足够控制卡片布局，CardGroup更适合让一组卡片等高对齐，不是用来做栅格布局的。
• 多余的Array.from({ length: 4 }).map(...)循环会让每个菜品生成4张完全相同的卡片，这显然不是你想要的效果，我们应该直接遍历你的dishes数组。
• 你给Card写了两个style属性，后面的会覆盖前面的，而且width: '100em'会让卡片宽到溢出屏幕，完全没必要，Col会自动控制卡片的宽度。

修正后的完整代码 #

import React from 'react'; // React是默认导出，不用加花括号
import { Card, Button, Row, Col } from 'react-bootstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

const MyDishes = props => {
  const { dishes } = props;
  
  // 空状态处理：没有菜品时显示提示
  if (dishes.length === 0) {
    return <p>You haven't added any dishes yet!</p>;
  }

  return (
    <Row className="g-4"> {/* g-4用来设置卡片之间的间距 */}
      {dishes.map(d => (
        // md={3}表示中等屏幕及以上每行显示4个（Bootstrap栅格是12列，12/3=4）
        <Col xs={12} sm={6} md={3} key={d.id}>
          <Card>
            <Card.Img variant="top" src={d.attributes.picture} />
            <Card.Body>
              <Card.Title>{d.attributes.name}</Card.Title>
              <Card.Text>Possibly some text here</Card.Text>
              <Link to={`/dishes/${d.id}`}>
                <Button variant="primary">Full Recipe</Button>
              </Link>
            </Card.Body>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

const mapStateToProps = state => {
  return { dishes: state.myDishes };
};

export default connect(mapStateToProps)(MyDishes);

关键调整说明 #

1. 响应式栅格设置：xs={12}（手机每行1张）、sm={6}（平板每行2张）、md={3}（桌面每行4张），完美适配不同屏幕尺寸。
2. 移除冗余代码：删掉了CardGroup和多余的循环，直接遍历dishes数组生成卡片，逻辑更清晰。
3. 样式优化：去掉了Card上的固定宽度，让卡片自动填充Col的空间，同时用g-4给Row设置了卡片间距，布局更美观。
4. 用户体验提升：增加了空状态提示，避免页面空白。

这样调整后，你的卡片就能正确每行显示4张，而且不会有报错啦！

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