useEffect不显示异步函数结果

Question

我有一个非常简单的例子，在阅读了其他几篇StackOverflow文章后，我认为这会很好。显然，事实并非如此。我在日志中得到了data > Promise {<pending>}，尽管console.logs()写在内部，异步函数的主体返回了所需的值。

异步功能

const firestoreGetTopics = async (onlyTitles?: boolean) => {
try {
const snapshot = await firebaseFirestore.collection("topics").get();
if (onlyTitles) {
return snapshot.docs.map((doc) => doc.data().title);
}
return snapshot.docs.map((doc) => doc.data());
} catch (error) {
console.log("Error fetching Topics: ", error);
}
};

具有useEffect的组件

const FileUpload = ({ dispatch }: Props) => {
...
useEffect(() => {
const data = firestoreGetTopics();
console.log("data", data);           <-- logs "data > Promise {<pending>}"
}, []);
...
}

我将继续深入研究，尽管我在这里找到的示例与其他类似的解决方案相匹配。。。所以我对此有点困惑。也许我错过了一些显而易见的东西。

Answer 1

您的函数fireshoreGetTopics返回Promise，因此为了获得函数的实际结果，您需要使用await关键字或使用Promise上的then方法获得结果：

useEffect(() => {
(async function(){
const data = await firestoreGetTopics();
console.log("data", data)
})()
}, []);

或者使用promise语法：

useEffect(() => {
firestoreGetTopics().then(data => {
console.log("data", data);
});
}, []);

Answer 2

函数firestoreGetTopics是异步，因此需要await。

在async函数中使用await尝试以下操作：

useEffect(() => {
const run = async () => {
const data = await firestoreGetTopics();
console.log("data", data);           
}
run();
}, []);