从 Firestore 返回值而不是 console.logging 它。 - 反应答案

【问题标题】：Return value from Firestore instead of console.logging it. - React从 Firestore 返回值而不是 console.logging 它。 - 反应
【发布时间】：2021-09-24 22:33:29
【问题描述】：

我查看了 Firestore 文档。关于如何检索数据，它工作正常。但我无法将值存储在变量中。我看过here如何从firestore数据库返回值？但答案最终结果仍然是console.log(result);。

function returnUserData(userId){
  let docRef = db.collection("users").doc(userId)
  return docRef.get().then((doc) => {
    if (doc.exists) {
        doc.data()
        return doc.data();
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
  }).catch((error) => {
      console.log("Error getting document:", error);
  });
}
returnUserData(localStorage.getItem("currentUserId")).then(result => {
  console.log(result);
})

我如何才能返回returnUserData 的实际值？

【问题讨论】：

该值已存储在变量中。您已将其命名为 result
如果我尝试在其他地方使用console.log(result)，我得到的结果未定义。
result 仅在您的 .then() 回调函数的范围内。你想对结果做什么？你想在哪里使用它？
我正在尝试运行 returnUserData，将其存储在一个变量中并在 useState 中使用它。

标签： javascript reactjs asynchronous google-cloud-firestore

【解决方案1】：

在一个典型的 React 应用程序中，您希望从结果中设置状态值，您可以在 useEffect 钩子中进行这样的异步调用，并在状态值解析后设置它

const [doc, setDoc] = useState()

useEffect(() => {
  returnUserData(localStorage.getItem("currentUserId")).then(result => {
    setDoc(result)
  })
}, [])

【讨论】：

哈！这工作正常。我从来没有想过要使用 useEffect()，谢谢你！冷却结束后我会接受
具有空依赖项数组的useEffect 仅在您的组件挂载时运行一次。见reactjs.org/docs/…