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

Question

我有一个文本框，用户输入一个存储在状态value中的数字。

现在我想创建一个数组[0, 1, 2, ..., value]。

这个数组将用于创建(value + 1)数量的框/div，每个框/div都有相应的ids。

现在我试过了

{(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)中使用它。