Soy relativamente nuevo en JavaScript/React. Trabajando en una aplicación React simple, estoy atascado con un problema real que no puedo resolver.

Este es el código del que hablo:

 const Inventory = () => { let product = []; let response = fetch("http://localhost:3000/inventory.json") .then( response => response.json() ) .then( data => data.map( item => { product.push(item.name); })) .then (console.log(product[0])) setTimeout( x => console.log(product[0]), 1000)

Inventory.json es un archivo simple, que publicaré aquí para completarlo:

 [ { "name": "Cookies1", "details": "Cookies1D", "lastFilled": "5. Jan. 2022", "lastReq": "2. Jan. 2022", "Status": "full" }, { "name": "Cookies2", "details": "Cookies2D", "lastFilled": "5. Jan. 2022", "lastReq": "2. Jan. 2022", "Status": "full" } ]

Ahora, esperaba que el código funcionara de la siguiente manera:

1. Fetch obtendrá los datos (¡que funciona!)
2. Después de eso, el JSON se extrae de los datos (primero ENTONCES)
3. Después de eso, el JSON se extrae a una matriz a través del mapa (segundo ENTONCES)
4. Después de eso, el primer elemento de la matriz se registra en la consola (el tercero ENTONCES)

Sin embargo, lo que obtengo de la consola de mi tercer .then es indefinido .

Para probar si este problema tiene algo que ver con la naturaleza asíncrona de la búsqueda, agregué una línea que espera 1 segundo antes de que la consola registre el primer elemento de la matriz ( setTimeout(... ), que funciona absolutamente como se esperaba y console.logs " Galletas1".

¿Pero como puede ser eso? Tengo entendido que .then se ejecuta después de los comandos anteriores (es decir, después de que se haya resuelto la promesa anterior). Eso significa que .then (console.log(product[0])) debería darme el mismo resultado (definido) que setTimeout( x => console.log(product[0]), 1000) .

¿Por qué mi tercer .then vuelve indefinido y cómo puedo resolver esto? Parece que tengo algo terriblemente mal. Alguien podría ayudarme con ese rompecabezas. Realmente me exaspero con eso.

Saludos amables Chris