在我的客户端组件上,我调用getBenchmarksByUser()来获取我需要的数据:
export default function BenchmarkBrowser({uid}) {
console.log("client uid:", {uid})
// Watch the state of our Benchmarks
const [benchmarks, setBenchmarks] = useState();
// Send the server a request for our Benchmarks
useEffect(() => {
console.log("BenchmarkBrowser component is rendered.");
getBenchmarksByUser(uid).then((res) => {
console.log("benchmarks received by client", res);
setBenchmarks(res);
})
.catch((err) => {
console.log("Error!", err);
});
}, [uid]);
return (
<>
<h1>benchmark browser...</h1>
</>
);
}
字符串
在服务器组件上,它查询Firestore并返回有问题的文档:
'use server'
import { db } from "@/lib/firebase";
import { query, getDocs, collection, orderBy, limit } from "firebase/firestore";
export async function getBenchmarksByUser(uid) {
console.log("server received uid:", uid);
const benchmarksQuery = query(
collection(db, 'users/' + uid + '/benchmarks'),
orderBy('created'),
limit(5)
);
await getDocs(benchmarksQuery).then((res) => {
console.log("server snapshot docs length", res.docs.length)
return res.docs;
})
.catch((err) => {
console.log("ERROR",err);
return null;
})
}
型
对我来说奇怪的是,我知道数据已经正确获取,因为我可以看到控制台输出in the server console (screenshot)
但是当它返回到客户端组件时,它是未定义的!(screenshot)的
这是怎么回事为什么我的数据突然未定义?
2条答案
按热度按时间daolsyd01#
我相信这是因为你的
getBenchmarksByUser
是异步的,但你不为它await
。试试看
字符串
de90aj5v2#
我想出来了!问题是,在服务器组件中,我返回了
.then()
中的promise的结果将promise的结果存储在
const
中,并在下一行返回,解决了这个问题。注意:这段代码可以工作,但是在服务器控制台中返回了一个警告,因为在将数据返回给客户端组件之前,我还没有将数据转换为简单的对象。(请参见将属性从服务器传递到客户端组件(序列化))
字符串