MongoDB+React+Redux项目商品列表仅垂直展示无法横向排列问题咨询

• 你将row center这个本应该包裹所有商品的布局容器类，写在了map循环内部，导致每一个商品都单独独占一行row容器，自然只能垂直竖向排列
• row类通常为弹性布局容器，需要把所有商品卡片作为它的直接子元素，才能实现横向自动排列、超出自动换行的效果

import { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
// Actions
import { listProducts } from '../redux/actions/productActions';

const Home = () => {
  const dispatch = useDispatch();
  const getProduct = useSelector((state) => state.getProduct);
  const { products, loading, error } = getProduct;

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

  return (
    <div>
      { loading ? <div><Box sx={{ width: '100%' }}>
            <LinearProgress />
            </Box></div> : error ? <h2>{ error }</h2> : 
            {/* row容器移到map外层，包裹所有商品卡片 */}
            <div className="row center">
              {products.map((product) => (
                <a href={`/product/${product._id}`} key={product._id}>
                  <div className="card">
                    <img className="medium" src={ product.imageUrl } alt="product" />
                    <div className="card-body">
                      <h2>{ product.name }</h2>
                      <Rating rating={product.rating} numReviews={product.numReviews} />
                      <div className="price">
                        ₦{ product.price.toLocaleString(undefined, { minimumFractionDigits: 2 }) }
                      </div>
                    </div>
                  </div>
                </a>
              ))}
            </div>
      }
    </div>
  )
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  gap: 20px; /* 控制商品卡片之间的间距 */
}
.card {
  width: 280px; /* 给卡片固定宽度，避免自适应拉伸变形 */
}

1. 将key属性移到了map循环的最外层子元素（a标签）上，符合React规范，避免控制台警告
2. 将row center容器从循环内部移到了products.map的外层，所有商品卡片都作为同一个弹性容器的子元素，自动实现横向排列、一行放不下自动换行的效果
3. 移除了每个商品外面多余的row容器，避免每个商品独占一行

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