Bootstrap网格布局问题：数组分块后无法正确渲染多行row

Hey there, let's sort out that grid layout issue you're facing! The main problems here are that you aren't using your chunked array in the component render, your chunking function mutates the original array (which can cause unexpected bugs later), and each item isn't wrapped in Bootstrap's col class to make the grid work properly. Let's break down the fixes step by step:

1. Fix the Chunking Function (Avoid Mutating the Original Array) #

Your current splitArrayIntoChunks uses splice, which removes elements from the original itemsToRender array—this means if you try to reuse that array later, it'll be empty. Let's swap it out for slice, which creates a new subarray without modifying the original:

function splitArrayIntoChunks(arr, chunkLen) {
  const chunkList = [];
  // Loop through the array in increments of chunkLen
  for (let i = 0; i < arr.length; i += chunkLen) {
    // Slice creates a new subarray from index i to i+chunkLen
    chunkList.push(arr.slice(i, i + chunkLen));
  }
  return chunkList;
}

2. Update the Component to Use Chunks & Add Bootstrap col Classes #

Right now, you're still rendering the original itemsToRender array instead of the grouped chunks. We need to map over each chunk to create a row, then map over each item in the chunk and wrap it in a col div so Bootstrap handles the layout:

return (
  <div className="container">
    {/* Map over each chunk to create a Bootstrap row */}
    {chunks.map((chunk, rowIndex) => (
      <div key={rowIndex} className="row mb-3"> {/* mb-3 adds optional margin between rows */}
        {/* Map over items in the chunk and wrap each in a col */}
        {chunk.map(item => (
          <div key={item.id} className="col">
            <Item item={item} />
          </div>
        ))}
      </div>
    ))}
  </div>
);

• We use rowIndex as the key for each row since each chunk is a unique group (you could also use a combination of item IDs from the chunk if you prefer a more stable key).
• Wrapping each Item in a col div tells Bootstrap to evenly distribute space between items in the row.

Full Working Example #

Putting it all together, here's your complete code with fixes:

const itemsToRender = [
  { id: '1', name: 'Item1', image: 'item1.png' },
  { id: '2', name: 'Item2', image: 'item2.png' },
  { id: '3', name: 'Item3', image: 'item3.png' },
  { id: '4', name: 'Item4', image: 'item4.png' },
  { id: '5', name: 'Item5', image: 'item5.png' },
  { id: '6', name: 'Item6', image: 'item6.png' }
];

function splitArrayIntoChunks(arr, chunkLen) {
  const chunkList = [];
  for (let i = 0; i < arr.length; i += chunkLen) {
    chunkList.push(arr.slice(i, i + chunkLen));
  }
  return chunkList;
}

const chunks = splitArrayIntoChunks(itemsToRender, 3);

// Your grid component
function ItemGrid() {
  return (
    <div className="container">
      {chunks.map((chunk, rowIndex) => (
        <div key={rowIndex} className="row">
          {chunk.map(item => (
            <div key={item.id} className="col">
              <Item item={item} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

// Sample Item component (adjust to match your actual component)
function Item({ item }) {
  return (
    <div className="card p-2">
      <img src={item.image} alt={item.name} className="img-fluid" />
      <h6 className="mt-2">{item.name}</h6>
    </div>
  );
}

This will render exactly the structure you're expecting: rows of 3 items, each properly spaced by Bootstrap's grid system.

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