The problem is that you're pushing promises into an array, not the values inside the promises. Instead of using that array, you can return in the map directly, and use Promise.all
to get the values out. (You could use the array too, but there's no need for it since you're using a map). I lifted the getBooks
call into its own function for clarity here, but the important change is what's going on in getChapters
in the map:
async function getBooks () {
const res = await fetch('https://getbible.net/v1/web/books.json')
const json = await res.json()
return Object.entries(json)
}
async function getChapters (books) {
const chapters = await Promise.all(
books.map(async (item) => {
const url = item[1].url
const res = await fetch(url)
const json = await res.json()
return json
})
)
return chapters
}
export async function getStaticProps() {
const books = await getBooks()
const chapters = await getChapters(books)
return {
props: {
books,
chapters,
},
}
}
You can test this in plain Node (assuming node-fetch
or a similar package) or the browser outside of Next with something like:
getStaticProps().then(data => {
console.log(JSON.stringify(data, null, 2))
})
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…