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

Question

我有一个文本框，用户可以在其中输入一个存储在状态 value 中的数字。
现在我想创建一个数组 [0, 1, 2, ..., value].
该数组将用于创建 (value + 1) 个 boxes/divs 个，每个都有相应的 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).

中使用之前将字符串解析为数字

Map an array created from a variable to render said number of elements in Grommet