在Next.js中渲染卡片组

Question

我想弄清楚如何创建一个函数，在next.js中呈现一组卡片(使用react语义ui)。我的意思是，我有50张照片，我想创建时不需要手动输入所有50张卡片，这个功能会为我生成这个组。要做到这一点，我只需要一个索引，因为我的意图是传递图像的src "/src/image/"+index+"/.png">

我不是很熟悉语义ui和next.js，但我可以做一些事情。我给你留下了我写的代码，即使我认为有更快、更漂亮的解决方案，它也能工作……唯一的问题是，返回的第一个索引是最大值，即50，然后是1…为什么?

renderCard() {
const index = [50];
let i;
for(i = 1; i<49;i++) index[i]=i
const items = index.map(index => {
return {
image: "/src/image/"+index+".png",
header: i
};
}); 
return <Card.Group itemsPerRow={3} items={items}/>
}

Answer 1

内联注释

renderCard() {
const index = [50]; //This creates an array of one element
// index[0] === 50
let i;
for(i = 1; i<49;i++) { //array indexes start at 0, not 1
index[i]=i  //This adds numbers 1-49 to the end of array
}
//after this loop,
//index === [50,1,2,...,48]

尝试这里列出的解决方案之一来初始化您的数组。

。

const index = Array.from(Array(50).keys());
//index === [0,1,2,...,49];