如何使用带有数字状态的地图功能

Question

我想使用带有数字状态的地图功能。你们已经知道 map 函数适用于数组。但我想将它与数字一起使用，而不是数组。因为我不想创建一个数组来使用 map 函数。并且 For 循环在 jsx 中不起作用。所以让我们去代码。

我正在定义我遇到麻烦的数字状态：

const [pages, setPages] = useState(5)

现在，是时候使用地图功能了。它只使用一个数字：

[...Array(5)].map((page,i) => 
    <div>Page: {i+1}</div>
)

但它不适用于我之前定义的号码状态：

[...Array(pages)].map((page,i) => 
    <div>Page: {i+1}</div>
)

这实际上是我使用地图功能的最大问题。

Answer 1

您可以使用Array.from 正确创建一个大批实例并映射它以创建页面数组。

Array.from({ length: pages }, (_, idx) =>
   <div>Page: {idx + 1}</div>
)

const pages = 5;

const pagesArr = Array.from({ length: pages }, (_, idx) => idx + 1);

console.log(pagesArr);