Soy bastante nuevo en React y TypeScript. Tengo algunos íconos que quiero mapear así:
const iconLookups =
dataPackNumber1.map(
(e) =>
e.icon_prefix &&
e.icon_name && {
prefix: e.icon_prefix,
iconName: e.icon_name,
},
) as IconLookup[];
Además, tengo más íconos en dataPackNumber2 y dataPackNumber3 que se ven iguales y me gustaría mapearlos todos a la vez. Otra forma en la que estaba pensando era mapearlos por separado y luego insertarlos en la matriz iconLookups , pero parece que no puedo entender cómo.
iconLookups.push(
dataPackNumber.map(
(e) =>
e.icon_prefix &&
e.icon_name && {
prefix: e.icon_prefix,
iconName: e.icon_name,
},
) as IconLookup[];)
y
const iconLookups =
dataPackNumber1 && dataPackNumber2 && dataPackNumber3.map(
(e) =>
e.icon_prefix &&
e.icon_name && {
prefix: e.icon_prefix,
iconName: e.icon_name,
},
) as IconLookup[];
El código no me proporciona errores, pero en la interfaz de usuario puedo ver que solo se representará el último número de paquete de datos proporcionado, si los dataPackNumber con && .
¿Puede alguien por favor iluminarme?
.push() empujará un elemento a la matriz. En su caso, ese elemento es una matriz completa. Dando como resultado una estructura como esta:
[1, 2, [3, 4, 5]]
&& probablemente solo se resolverá en la última expresión, que en su caso es solo dataPackNumber3.map(/*...*/) .
Una forma de combinar los tres es con la sintaxis extendida. Estructuralmente sería algo como:
let result = [...array1, ...array2, ...array3];
Entonces en tu caso podría ser:
const iconLookups = [
...dataPackNumber1,
...dataPackNumber2,
...dataPackNumber3.map(/*...*/)
] as IconLookup[];
Editar: como se señala en un comentario a continuación , .push() puede agregar múltiples elementos a una matriz cuando se agrega como múltiples argumentos:
arr1.push(3, 4, 5);
Lo que significa que la sintaxis extendida también puede funcionar allí:
const iconLookups = dataPackNumber1.map(/*...*/) as IconLookup[];
iconLookups.push(...dataPackNumber2.map(/*...*/));
iconLookups.push(...dataPackNumber3.map(/*...*/));