Next.js使用React Semantic UI渲染批量卡片索引异常如何解决？

你当前代码的异常来自三处基础逻辑错误：

• 数组初始化错误：const index = [50] 是创建首个元素值为50、长度为1的数组，并非你预期的长度为50的空数组，这就是第一个卡片索引为50的核心原因。
• 循环范围错误：for(i = 1; i<49;i++) 只会循环到i=48，最终数组里只有50、1~48共49个元素，缺了49、50两个索引的卡片。
• 变量作用域错误：map回调中header赋值用了外层的i，for循环结束后i的值固定为49，所有卡片的header都会变成49，不会随索引动态变化。

下面是修正后的写法，直接生成1~50的索引数组，逻辑更清晰：

// 类组件写法
renderCard() {
  // 生成长度为50的数组，批量生成1~50的卡片配置
  const items = Array.from({length: 50}, (_, idx) => {
    const cardIndex = idx + 1
    return {
      image: `/src/image/${cardIndex}.png`,
      header: cardIndex
    }
  })
  return <Card.Group itemsPerRow={3} items={items}/>
}

如果是Next.js常用的函数式组件，写法更精简：

// 函数式组件写法
const CardList = () => {
  const items = Array.from({length:50}, (_, idx) => ({
    image: `/src/image/${idx+1}.png`,
    header: idx+1
  }))
  return <Card.Group itemsPerRow={3} items={items} />
}

• Next.js中如果是静态资源，建议放在public目录下，不需要加/src前缀，把图片放到public/image文件夹后，src直接写/image/${cardIndex}.png即可，Next.js会自动解析public目录的资源。
• 如果图片存放在src目录下，需要用import动态导入或者搭配next/image组件使用，避免打包后资源路径出错。

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