筛选后的商品列表无法正确适配div容器布局问题排查

问题描述 #

商品数组筛选功能核心逻辑运行正常，但筛选后渲染的商品无法像原始商品列表那样正确适配外层div容器，初步判断问题出在CSS样式层面。

• 原始商品布局效果：
  
• 筛选后布局错乱效果：
  

关联代码片段 #

筛选功能核心逻辑 #

const clickSkin=()=>{
  let filteredProductsClone=products.filter(product=>product.category == 'skin')
  setIsFiltered(true)
  setFilteredProducts(filteredProductsClone)
}

商品组件条件渲染逻辑 #

{isFiltered == false && <Products items={products}/>}
{isFiltered && <Products items={filteredProducts}/>}  

商品列表容器styled-components样式 #

const MainProductsContainer=styled.div`
width:100%;
height: 200vh;
display:flex;
flex-direction:row;
position:relative;
justify-content:center;
align-items:center;
`

问题诱因 #

核心问题出在外层容器的flex样式配置错误：

• 写死了固定高度height: 200vh，容器高度无法随筛选后的商品数量自适应
• flex布局未配置flex-wrap: wrap，商品项超出容器宽度时无法自动换行
• 设置了align-items: center，当筛选后商品数量较少时，所有商品会在固定高度的容器内垂直居中排布，无法从顶部开始按网格铺开，最终出现截图中商品挤在容器中间的错乱效果。

原有条件渲染逻辑重复挂载两个Products组件实例不会直接导致样式错乱，但属于冗余写法，可一并优化。

修复方案 #

1. 修改外层容器样式，调整flex配置，改用自适应高度：

const MainProductsContainer=styled.div`
width:100%;
min-height: 100vh; // 替换固定高度为最小高度，内容少时占满首屏，内容多时自动撑高
display:flex;
flex-direction:row;
flex-wrap: wrap; // 开启自动换行，商品项超出宽度时自动落到下一行
position:relative;
justify-content:center;
align-items: flex-start; // 改为顶部对齐，商品从容器顶部开始排列
gap: 16px; // 可选：配置商品项统一间距，避免布局拥挤
`

2. 简化冗余的条件渲染逻辑，统一渲染入口，避免重复挂载组件：

// 提前计算当前需要展示的商品列表
const currentProducts = isFiltered ? filteredProducts : products
// 单次渲染组件即可
<Products items={currentProducts}/>

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