React中如何将产品列表从表格改为卡片展示？

先修复核心报错问题 #

你代码里最致命的bug是内部函数和组件同名（都叫Products），这会导致作用域冲突，直接引发程序崩溃，先把内部函数改名，比如叫renderProducts。

替换为卡片布局的完整修改代码 #

下面是调整后的代码，用Bootstrap的Card组件替换原来的列表项，同时调整布局让卡片合理排列：

import { Card, Row, Col, Stack } from 'react-bootstrap';
import { Link, Outlet } from 'react-router-dom';
import { ProductContext } from './你的上下文路径'; // 替换成实际上下文文件路径

function Products(props) {
  // 重命名内部函数，避免和组件同名
  function renderProducts(products) {
    if (!products) return null; // 更严谨的空值判断，覆盖undefined、null等情况
    return products.map((product) => (
      // 用Col控制卡片宽度，配合Row实现响应式网格布局
      <Col key={product.id} sm={12} md={6} lg={4} className="mb-3">
        <Card>
          <Card.Body>
            <Card.Title>
              {/* 统一key值为product.id，修正原代码里Id/id大小写混用的问题 */}
              <Link to={`/products/${product.name}`}>
                {product.name}
              </Link>
            </Card.Title>
            {/* 可扩展添加更多产品信息，比如价格、描述 */}
            {/* <Card.Text>售价：{product.price}元</Card.Text> */}
          </Card.Body>
        </Card>
      </Col>
    ));
  }

  return (
    <>
      <h1>Products</h1>
      <Stack direction="horizontal" gap={3}>
        {/* 用Row代替原ListGroup，实现卡片网格布局 */}
        <Row className="align-self-start w-75">
          <ProductContext.Consumer>
            {({ products }) => renderProducts(products)}
          </ProductContext.Consumer>
        </Row>
        <Outlet />
      </Stack>
    </>
  );
}

export default Products;

关键改动说明 #

• 函数重命名：解决内部函数与组件同名的作用域冲突问题，这是你之前修改报错的核心原因。
• 布局替换：用Row+Col+Card组合实现卡片式布局，Col的sm/md/lg属性可以控制不同屏幕下的卡片数量，适配响应式显示。
• 空值判断优化：覆盖undefined等更多空值场景，避免渲染异常。
• key值统一：修正原代码里product.Id和product.id大小写混用的问题，保证key的唯一性。

额外提示 #

如果需要添加产品图片、详情描述等内容，直接在Card.Body里扩展Card.Img、Card.Text等组件即可，Bootstrap的Card组件支持丰富的内容结构。

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