React Carousel中映射数组实现每页展示2个元素的方法

原代码的两处slice用法错误导致渲染异常：

1. 内层allBlogs.nodes.slice(index, 2)的第二个参数是结束索引值，不是截取长度：当外层遍历的index为1时，截取范围是索引1到2（仅包含索引1的1个元素）；当index≥2时，起始索引大于结束索引，直接返回空数组，后续幻灯片无内容。
2. 外层用Math.round(allBlogs.nodes.length/2)计算幻灯片数量，在数组长度为奇数时会出现页数计算偏差，可能导致数据遗漏。

核心思路是先把原博客数组按「每2个元素一组」拆分成二维数组，每个子数组对应一个幻灯片的内容，再做遍历渲染即可，逻辑稳定不会出现索引偏移问题。

{/* 先按每组2个元素拆分博客数组 */}
const blogGroups = []
for (let i = 0; i < allBlogs.nodes.length; i += 2) {
  blogGroups.push(allBlogs.nodes.slice(i, i + 2))
}

<Carousel>
  {blogGroups.map((group, slideIdx) => (
    <Slide key={slideIdx}>
      {group.map((blog, blogIdx) => (
        <BlogAuthor key={blogIdx}>
          <Author>{blog.data.author}</Author>
          <BlogDate>{blog.data.date}</BlogDate>
        </BlogAuthor>
      ))}
    </Slide>
  ))}
</Carousel>

• 分块逻辑每次步进2个索引，自动适配任意长度的数组：如果数组总长度是奇数，最后一组会自动展示剩余的1个元素，不会丢失数据
• 渲染时每个分组对应一个Slide，分组内的博客元素依次渲染，完全符合每页2个元素、顺延展示的需求
• 列表渲染项补充了key属性，避免React抛出渲染警告

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