Question

我有一个非常简单的示例，在阅读了其他一些StackOverflow帖子之后，我认为这会很好。显然，事实并非如此。尽管data > Promise {<pending>}写在内部{em> 中，但我的日志中却得到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>}"
  }, []);

 ...

}

我将继续挖掘，尽管我的示例在这里找到了 matches 其他类似的解决方案...所以我对此感到有些困惑。也许我缺少明显的东西。

Answer 1

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

通过await函数中的async尝试以下操作：

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

    run();
}, []);

Answer 2

您的函数fireshoreGetTopics返回一个Promise，因此，要获得函数的实际结果，您需要使用await关键字或通过使用{{1} } Promise上的方法：

then

或使用promise语法：

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

useEffect不显示异步功能结果

2 个答案: