在ReactJS中,你可以在Array.fill中使用循环吗？

Question

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

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

我正在尝试使用索引中的升序值来生成React.Components数组,并且希望这是一个可行的选项.

Answer 1

不是.fill()单独使用,因为它只是分配而不是调用你给它的功能.

Array(3).fill(() => {}); // [ function, function, function ]

.map()但是,您可以使用它来完成此任务.您提供的迭代器函数将被赋予索引作为第二个参数(_用作第一个参数的一次性变量).

Array(9).fill(0).map((_, i) => <Foo index={i} />)

使用两者是必要的,因为Array(9)只分配数组length,使索引保持未分配状态.

'length' in Array(9) // true
0 in Array(9) // false

虽然.fill()可以使用未分配的索引,但.map()特别会忽略它们.

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

Array.from(Array(9), (_, i) => <Foo index={i} />)

另外,有了它,第一个参数不一定必须是Array:

Array.from({ length: 9 }, (_, i) => <Foo index={i} />)