在react js项目中的Chakra ui菜单中制作一个数字循环

Question

我正试图根据我制作的对象中的库存数量，用菜单项制作一个菜单列表，因此，如果对象中的库存是5，那么我希望菜单给我一个从1到5的循环，供用户选择

const productDetails = {
title : "product title",
stock : "5"
}

for (var i = 1; i <= productDetails.stock; i++) {
console.log(i)
}
<MenuList>
<MenuItem>{i}</MenuItem>
</MenuList>

Answer 1

您可以使用创建一个空字符串数组，然后在数组上创建map来获得MenuItem的数量，就像在productDetails.stock中一样。

我使用了index作为key，这是不推荐的。每个元素都可以使用任意键。

const productDetails = {
title: "product title",
stock: "5"
};
return (
<MenuList>
{Array(+productDetails.stock)
.fill("")
.map((n, i) => {
return <MenuItem key={i}>{i + 1}</MenuItem>;
})}
</MenuList>
);