В ReactJS, вы можете использовать цикл в Array.fill?

Question

Я из C #, но я новичок в React и JS в целом.Мне было интересно, если есть способ использовать лямбда-функции при объявлении массива, например:

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} />)

Кроме того, с ним 1-й аргумент не обязательно должен быть Array:

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

Answer 2

Попробуйте:

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

Answer 3

Не следует добавлять компоненты в состояние, хорошая практика - помещать в него только сериализуемые данные .Кроме того, компоненты должны быть созданы внутри render().

В любом случае, если вы хотите сделать что-то подобное для создания, скажем, массива чисел, я бы сделал что-то вроде этого:

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

Или, предполагая, что эти числа всегда начинаются с 0:

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

Answer 4

Возможно что-то вроде этого:

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