Question

我来自C＃背景，但我是React和JS的新手。我想知道在声明数组时是否有办法使用lambda函数，例如：

this.state = {
arr: Array(9).fill( (i) => {<Foo index={i} />} ),
};

我试图在索引中使用升序值创建一个React.Components数组，并且希望这是一个可行的选项。

Answer 1

不单独使用0，因为它只会分配而不是调用您提供的功能。

.fill()

然而，您可以将其与.map()一起使用来实现此目的。您提供的迭代器函数将被赋予索引作为第二个参数（使用Array(3).fill(() => {}); // [ function, function, function ]作为第一个的一次性变量）。

使用两者是必要的，因为Array(9).fill(0).map((_, i) => <Foo index={i} />)仅分配数组Array(9)，而不会分配索引。

length

虽然'length' in Array(9) // true 0 in Array(9) // false可用于未分配的索引，但.fill()会明确忽略它们。

您也可以使用Array.from()，它接受与.map()相同的迭代器。

.map()

另外，有了它，第一个参数不一定必须是Array.from(Array(9), (_, i) => <Foo index={i} />)：

Array

Answer 2

可能是这样的：

this.state = {
  arr: new Array(5).map((emptyElement, index) => <Foo index={index} />);
}

Answer 3

尝试：

this.state = {
  arr: Array.from(Array(9), (value, index) => <Foo index={index} />)
}

Answer 4

您不应该向州it's a good practice to put just serializable data in it添加组件。此外，应在render()内创建组件。

无论如何，如果你想做类似创建的东西，比方说，一组数字，我会做这样的事情：

this.state = {
    arr: Array(9).fill().map((v, i) => i),
};

或者，假设这些数字始终从0开始：

this.state = {
    arr: [...Array(9).keys()],
};