时间戳

首页 > 解决方案 > 如何在反应中将从firestore获取的文档传递到本地状态

javascript - 如何在反应中将从firestore获取的文档传递到本地状态

问题描述

我在 Firebase Firestore 中有一些文件。我正在使用这个 javascript 函数来获取那些

const fetchName = async () => {
      console.log("fetchName fired");
      const snapshot = await db
        .collection("Users")
        .doc(user?.uid)
        .collection("details")
        .doc("data")
        .get();
        // Data is a local state variable
        // SetData is used to manipulate Data
      setData(snapshot.data());
      console.log("Snapped Data: ",snapshot.data());
    console.log("Fetched Data: ",Data);
  };

这是状态变量

const [Data, setData] = useState("");

我正在将fetchName()函数传递给useEffect钩子。

useEffect(()=>
  {
    console.log("UseEffect Fired");
    if(user!==null)
    {
      console.log("User not NUll, User->",user);
      fetchName();
    }
  },[user])

问题

UseEffect 工作正常并fetchName()在每次用户登录或注销时触发。这里的主要问题是当使用效果被触发时，我可以看到snapshot.data()获取正确的数据，但它没有将其分配给 setData()。从命中和试验中，我看到setData()只有在我对代码进行任何更改或重新启动服务器时才会触发。

期望的结果

但我不希望每次 snapshot.data() 获取它应该分配给Data使用的数据setData()

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

如果您担心console.log内部的第二行fetchName，那么您的想法是错误的。

所以状态更新是异步的。

例如，

const handleEvent = e => {
    setState(e.target.value);
    console.log(state);  
}

这不会记录最新的值——这是因为状态更新是异步的，所以状态更新后的同步行为不应该依赖状态变量来获取它的最新值。

如需更深入的解释，请查看此处和此处

推荐阅读