Tengo el siguiente código:
const getNFTs = async (address: string) => { ... // hidden for brevity //Nested code const promises = Array.from({length: output.toNumber()}).map() => { ... // hidden for brevity } const promiseArray = await Promise.all(promises); //returns object const imageArray = Object.values(promiseArray); //converts to array }Si fuera a console.log imageArray , me dan una matriz como esta:
['https://imagepath.com/image1.png','https://imagepath.com/image2.png','https://imagepath.com/image3.png',]
Quiero usar imageArray para mapear a través de la matriz y representar una cuadrícula de imágenes en la interfaz de usuario. Pero cuando intento mapear a través de esto, aparece un error que indica que imageArray no está definido probablemente debido a problemas de alcance.
¿Escribo la función de mapa ( con el marcado HTML/JSX requerido ) dentro de la función asíncrona getNFTs ? ¿O hay una mejor manera de acceder a la matriz para generar la lista de imágenes en la interfaz de usuario?
promiseArray ya debería ser una matriz de URL de imagen, Object.values producirá efectivamente el mismo valor. Recuerde que una matriz es simplemente un objeto especial de pares clave-valor asociativos, es decir, las claves son los índices de la matriz y los valores son los valores almacenados de la matriz. Si el valor resuelto devuelto no es la URL de la imagen, es probable que pueda "desempaquetarlas" más arriba en la cadena Promise al procesar las solicitudes asincrónicas.
Puede guardar esta matriz en el ámbito externo agregando algún estado React para mantener este valor de matriz y poner en cola una actualización de estado para guardarlo y activar una nueva representación.
Ejemplo:
const [imageArray, setImageArray] = React.useState([]); ... const getNFTs = async (address: string) => { ... // hidden for brevity //Nested code const promises = Array.from({ length: output.toNumber() }).map() => { ... // hidden for brevity } const imageArray = await Promise.all(promises); setImageArray(imageArray); }; ... Más tarde, puede hacer referencia al estado de imageArray y representarlo según sea necesario.
imageArray.map(.....)