javascript - 映射从变量创建的数组以在 Grommet 中呈现所述数量的元素

Question

我有一个文本框，用户在其中输入一个存储在 state 中的数字value。
现在我想创建一个数组[0, 1, 2, ..., value]。
该数组将用于创建(value + 1)具有相应 ID 的框/div 的数量。

现在我已经尝试过了

{(value) && 
  ([...Array(value).keys()].map(id => (
    <NodeBox id={id} >
      <h3>{id}</h3>
    </NodeBox>
  )))
}

但它只创建了一个带有 h3 文本“0”的框。我有正确定义的状态、NodeBox 和所有内容。似乎没有问题。

如果我这样做

{(value) && 
  ([0, 1, 2, 3].map(id => (
    <NodeBox id={id} >
       <h3>{id}</h3>
    </NodeBox>
  )))
}

我得到了预期的结果。我得到 4 个包含相应数字的盒子。

score 0 · Accepted Answer

我认为该值是字符串而不是数字。当您使用new Array()or Array.from() 时，您查看的是某物的长度而不是实际值。所以我认为这value是一个表示小于 10 的数字的字符串，它的长度为 1，与您的输出匹配。

所以我会使用Array.from({ length: value }).map(( id, index ) => (<NodeBox id={index} >)这样 value 是字符串还是数字都没有关系。

另一种方法是在将字符串用于Array(value).

1 回答 1