React调用API获取图片需展示为3列，用Grid、CardColumns仅显1列如何解决？

问题根因 #

1. 错误使用React Bootstrap的CardColumns组件：该组件是卡片瀑布流的全局外层容器，需要包裹所有卡片，你当前将其逐个套在单个卡片外部，导致每个卡片独占一个列容器，最终只会显示单列布局，且该组件在Bootstrap 5版本中已废弃，不推荐继续使用。
2. 混用Semantic UI和React Bootstrap两套UI库的布局组件，极易出现样式优先级冲突，引发布局异常。
3. Semantic UI的Grid.Row未指定列数，无法自动分割为3列。

解决方案 #

推荐二选一即可，不要混用两套UI的布局体系。

方案1：使用Semantic UI Grid实现3列布局

直接利用Semantic UI Grid的列配置属性实现，修改后代码如下：

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { Grid, Container } from 'semantic-ui-react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import { fetchMealsStartAsync } from '../actions/getMeals';

const MealList = (props) => {
  const { cat } = props;
  const meals = useSelector((state) => state.meals.meals);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchMealsStartAsync(cat));
  }, [cat]);

  return (
    <Container textalign="center" style={{ marginTop: 40 }}>
      <Grid>
        {/* 给Row指定columns={3}，自动将行分为3等列 */}
        <Grid.Row columns={3}>
          {
            meals && meals.map((meal) => (
              <Grid.Column key={meal.idMeal} style={{ marginTop: 20 }}>
                <Card
                  as={Link}
                  to={{
                    pathname: `/ingredients/${meal.idMeal}`,
                    id: meal.idMeal,
                  }}
                  className="m-2 pb-1"
                >
                  <Card.Img variant="top" src={meal.strMealThumb} />
                  <Card.Body>
                    <Card.Title>
                      {meal.strMeal}
                    </Card.Title>
                    <Button variant="primary">
                      获取食谱
                    </Button>
                  </Card.Body>
                </Card>
              </Grid.Column>
            ))
          }
        </Grid.Row>
      </Grid>
    </Container>
  );
};

MealList.propTypes = {
  cat: PropTypes.string,
};

MealList.defaultProps = {
  cat: '',
};

export default MealList;

方案2：使用React Bootstrap原生布局实现3列响应式布局

完全使用Bootstrap的栅格系统实现，移动端自动适配为1列，桌面端显示3列，修改后代码如下：

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { Container, Row, Col, Button, Card } from 'react-bootstrap';
import { fetchMealsStartAsync } from '../actions/getMeals';

const MealList = (props) => {
  const { cat } = props;
  const meals = useSelector((state) => state.meals.meals);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchMealsStartAsync(cat));
  }, [cat]);

  return (
    <Container className="mt-5 text-center">
      {/* xs={1}移动端1列，md={3}中等及以上屏幕3列，g-4为列间距 */}
      <Row xs={1} md={3} className="g-4">
        {
          meals && meals.map((meal) => (
            <Col key={meal.idMeal}>
              <Card
                as={Link}
                to={{
                  pathname: `/ingredients/${meal.idMeal}`,
                  id: meal.idMeal,
                }}
                className="h-100 pb-1"
              >
                <Card.Img variant="top" src={meal.strMealThumb} />
                <Card.Body>
                  <Card.Title>
                    {meal.strMeal}
                  </Card.Title>
                  <Button variant="primary">
                    获取食谱
                  </Button>
                </Card.Body>
              </Card>
            </Col>
          ))
        }
      </Row>
    </Container>
  );
};

MealList.propTypes = {
  cat: PropTypes.string,
};

MealList.defaultProps = {
  cat: '',
};

export default MealList;

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