React中结合ReduxLazyScroll实现Bootstrap三列卡片布局问题

看起来你是在把传统列表改成Bootstrap网格布局时踩了循环嵌套的坑——重复渲染每个beer三次肯定是因为错误地在某个地方多套了一层循环，比如在row里又重复遍历了每个元素对吧？别担心，我们可以通过数组分组+正确的Bootstrap网格嵌套来解决这个问题，同时完美适配ReduxLazyScroll的无限滚动逻辑。

第一步：编写数组分组工具函数 #

首先我们需要把你的beersArray拆分成每3个元素一组的子数组，这样每组对应Bootstrap的一行。写一个简单的工具函数：

const chunkArray = (arr, chunkSize) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    chunks.push(arr.slice(i, i + chunkSize));
  }
  return chunks;
};

这个函数会把原数组按指定大小（这里是3）分割成多个子数组，最后一组如果不足3个也会正常保留，Bootstrap会自动处理剩余列的对齐。

第二步：重构渲染逻辑，结合Bootstrap网格 #

接下来在你的组件中，先把beersArray分组，然后遍历分组后的数组，每组渲染一个row，组内的每个beer渲染成col-md-4（根据你的响应式需求可以换成col-sm-6 col-md-4这类组合）：

import ReduxLazyScroll from 'redux-lazy-scroll';

// ...你的组件逻辑（比如从Redux获取beersArray、hasMore等状态）

const beerGroups = chunkArray(beersArray, 3);

return (
  <ReduxLazyScroll
    // 保留你原来的ReduxLazyScroll配置
    loadMore={loadMoreBeers}
    hasMore={hasMoreBeers}
    style={{ padding: '20px 0' }}
  >
    {/* 遍历分组后的数组，每组对应一行 */}
    {beerGroups.map((group, groupIndex) => (
      <div key={`beer-row-${groupIndex}`} className="row mb-4">
        {/* 遍历组内的每个beer，渲染成列 */}
        {group.map((beer) => (
          <div key={beer.id} className="col-md-4">
            {/* 替换成你原来的卡片内容 */}
            <div className="card h-100">
              <img src={beer.image_url} className="card-img-top" alt={beer.name} />
              <div className="card-body">
                <h5 className="card-title">{beer.name}</h5>
                <p className="card-text">{beer.tagline}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    ))}
  </ReduxLazyScroll>
);

关键注意点 #

• 避免重复循环：之前的错误大概率是你在row里直接循环了整个beersArray，又在某个地方重复遍历了三次，现在通过分组后，每个beer只会被渲染一次，对应到正确的列中。
• ReduxLazyScroll适配：因为分组逻辑是基于最新的beersArray计算的，当滚动加载更多beer时，beersArray更新，beerGroups会自动重新计算，新的行也会正确渲染，完全兼容无限滚动逻辑。
• 响应式优化：如果需要适配移动端，可以把col-md-4改成col-sm-6 col-md-4，这样在小屏幕上每行显示2个，中等及以上屏幕显示3个，提升移动端体验。
• key值的正确性：确保每个row和col的key是唯一的，这里用groupIndex和beer.id是比较稳妥的方式，避免React渲染时出现警告。

这样修改后，你的布局就会变成每行依次显示数组中第1-3、4-6...个beer的三列卡片，而且无限滚动加载的新内容也会自动按正确的分组渲染~

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