我目前陷入了异步地狱。 在我的React应用中,我有一个名为/menu的页面,它通过expressjs API从mongo实例加载数据。
在我的名为menu的数据库中,我有代表每餐类型(例如"早餐"、"午餐"等)的集合。在这些集合中,每个项目的文档看起来像这个面包集合示例:
{
_id: 2398jcs9dn2f9f,
name: "Ciabatta",
desc: "Italian bread",
imageURI: "image01.jpg",
reviews: []
}
这是我的 API,在页面加载时会被调用。
exports.getAllFoods = (req, res, next) => {
const db = mongoose.connection
const allCollections = {}
try {
db.db.listCollections().toArray((err, collections) => {
collections.forEach((k) => {
allCollections[k.name] = []
})
Object.keys(allCollections).map(k => {
let Meal = mongoose.model(k, MealSchema)
meal = Meal.find((err, docs) => {
allCollections[k] = docs
console.log(allCollections)
})
})
res.send(allCollections)
})
} catch (error) {
console.log(error)
res.send('unable to get all collections')
}
}
console.log(allCollections) 的最后一个输出结果如下:
{ snacks:
[ { review: [],
tags: [],
_id: 5fcec3fc4bc5d81917c9c1fe,
name: 'Simosa',
description: 'Indian food',
imageURI: 'image02.jpg',
__v: 0 } ],
breads:
[ { review: [],
tags: [],
_id: 5fcec41a4bc5d81917c9c1ff,
name: 'Ciabatta',
description: 'Italian bread',
imageURI: 'image02.jpg',
__v: 0 } ],
}
这正是我需要的,但我卡在了如何发送到React上。我该怎么做才能发送上述json呢?res.send(allCollections) 给我的结果是:
{
"snacks": [],
"breads": [],
"drinks": []
}
我明白为什么会发送上述内容,但我不知道该怎么做来解决它。
这是我的React页面加载时的情况。
useEffect(() => {
axios
.get('http://localhost:8888/api/allFoods')
.then((res) => {
setMealTypes(res.data)
})
.catch((err) => [
console.log(err)
])
}, [])
最终,我需要在控制台输出JSON,因为我想循环遍历该数据,并使用键作为标题,然后从值数组中列出值。
<div>
<h2>Breads</h2>
<img src=image01.jpg/>
<h3>Ciabatta</h3>
<p>Italian bread</p>
...
</div>
...
我很感激任何帮助,以及任何可以帮助我提高JavaScript理解的文档。