Entonces, en realidad es una pregunta nueva, porque la anterior no estaba muy clara y tuve que eliminarla. Tengo una función que toma datos de API de la función principal y cambia div contiene a estos datos de API.

Función principal:

 function searchBook(query){ const url = BASE_URL + `${query}` + '&' + API_KEY; fetch(url) .then(res => res.json()) .then(books =>{ console.log(books); }) .then(books => showBooks(books.results));

Entonces obtiene una API y la imprime en la consola como promesa. Pero en la próxima promesa, quiero invocar una función que muestre libros en la página al agregarlos a divs:

 showBooks = books =>{ const main = document.getElementById('book_container'); main.innerHTML = ""; books.forEach(book => { const bookEl = document.createElement('div'); bookEl.classList.add('book'); bookEl.innerHTML = ` <div class="book"> <div class="border"></div> <img src="img/cover.jpg"> <div class="book_info"> <h3>${book.title}</h3> <p>${book.authors}</p> </div> <div class="overview"> <p>${book.description}</p> </div> </div> ` main.appendChild(bookEl); }); } }

Debería obtener datos de libros de la función searchBooks a través de la promesa '.then', pero por alguna razón devuelve el siguiente error:

Entonces, cuando elimino los resultados de showBooks (books.results), devuelve el siguiente error:

Por algún motivo, los datos no están definidos, aunque se transmiten a través de una promesa, por lo que no estoy seguro de cuál podría ser el motivo. He buscado el mismo enfoque en Internet y parece funcionar bien, pero en mi aplicación no funciona. Imprime datos en la consola, por lo que los datos se pasan después de todo, pero por alguna razón no funciona en la función showBooks.