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

Question

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

现在我试过这个

{(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个包含相应数字的盒子。

Answer 1

我认为该值是一个字符串而不是数字。当您使用new Array()或Array.from（）时，您会查看某些内容的长度而不是实际值。所以我认为value是一个代表10以下数字的字符串，它的长度为1，与你的输出相匹配。

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

另一种方法是在Array(value)中使用之前将字符串解析为数字。