我有一个叫getQuote
的API和一个叫QuoteCard
的组件。在QuoteCard
中,我试图呈现一个喜欢引用的用户数组。API工作正常,我已经测试过了,下面的代码也工作正常。
const Post = async (url, body) => {
let res = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
"accept": "*/*"
},
body: JSON.stringify(body)
}).then(r => r.json());
return res;
}
const getAllLikes = async () => {
let users = await Post('api/getQuote', {
id: "639e3aff914d4c4f65418a1b"
})
return users
}
console.log(getAllLikes())
结果按预期运行:
然而,当试图Map这个promise结果数组以将其呈现到页面上时,我遇到了问题。
<div>
{getAllLikes().map((user) => (
<p>{user}</p>
))}
</div>
但是,我收到一个错误,指出:
getAllLikes(...). map不是函数
我不明白为什么会这样。为什么我不能Map数组?是因为它是一个承诺还是什么?
如果有人需要查看getQuote
API,请点击此处:
//Look ma I wrote an API by myself! :D
import clientPromise from "../../lib/mongodb";
const ObjectId = require('mongodb').ObjectId;
import nc from "next-connect";
const app = nc()
app.post(async function getQuote(req, res) {
const client = await clientPromise;
const db = client.db("the-quotes-place");
try {
let quote = await db.collection('quotes').findOne({
_id: new ObjectId(req.body.id)
})
res.status(200).json(JSON.parse(JSON.stringify(quote.likes.by)));
} catch (e) {
res.status(500).json({
message: "Error getting quote",
success: false
})
console.error(e);
}
})
export default app
谢谢你的帮助!
2条答案
按热度按时间cl25kdpy1#
我来自Angular,我相信我们可以在Observables(或Promises)上调用pipe,然后可以在pipe函数中调用Map
如果没有管道,我只能想到手动订阅(这不是一个好的做法)
// unsub from sub$appropriate//我们从ngOnDestroy以Angular 执行此操作
rdlzhqv92#
这是由于getAllLikes是一个异步函数,因此它返回的promise没有map函数。
您可以在使用await之前将其保存在状态变量中,或者使用. then将其链接起来。
最少的可重复示例