Jestem z tła C #, ale jestem nowy, aby reagować i ogólnie. Zastanawiałem się, czy istnieje sposób na korzystanie z funkcji Lambda podczas deklarowania tablicy, na przykład:

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

Próbuję wykonać tablicę React.comPonents z wartościami rosnącymi w indeksie i miał nadzieję, że byłoby to opcjonalne opcja.

7
Tom McKeown 2 czerwiec 2018, 20:46

4 odpowiedzi

Najlepsza odpowiedź

Nie z .fill() sam, ponieważ po prostu przypisuje, a nie przywołać funkcję, którą go dajesz.

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

Możesz użyć go wraz z .map() jednak, aby to osiągnąć. Funkcja Iterator, którą zapewniasz, otrzymasz indeks jako 2nd argument (przy użyciu _ jako zmienną do przewozu dla 1st).

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

Korzystanie z obu jest konieczne, ponieważ Array(9) przypisuje tylko {X1}}, pozostawiając nieprzypisane indeksy.

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

Podczas .fill() będzie działać z nieprzypisani indeksami, .map() specjalnie je zignoruje.


Możesz także użyć Array.from() zamiast tego, co akceptuje ten sam iterator jako .map().

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

Również, z nim, 1 argument niekoniecznie musi być Array:

Array.from({ length: 9 }, (_, i) => <Foo index={i} />)
9
Jonathan Lonowski 2 czerwiec 2018, 18:13

Prawdopodobnie coś takiego:

this.state = {
  arr: new Array(5).map((emptyElement, index) => <Foo index={index} />);
}
1
Tomasz Mularczyk 2 czerwiec 2018, 17:57

Nie powinieneś dodawać komponentów do stanu, Dobrą praktyką jest umieszczenie tylko danych serializowanych. Również należy utworzyć komponenty w render().

W każdym razie, jeśli chciałeś zrobić coś podobnego do stworzenia, powiedzmy, szereg liczb, zrobiłbym coś takiego:

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

Lub, zakładając, że te liczby zawsze zaczynają się od 0:

this.state = {
    arr: [...Array(9).keys()],
};
0
Danziger 2 czerwiec 2018, 18:16

Próbować:

this.state = {
  arr: Array.from(Array(9), (value, index) => <Foo index={index} />)
}
1
Anton Harniakou 2 czerwiec 2018, 17:57