无法使用 .where() 显示来自 firebase 的数据

时间:2021-03-02 17:54:27

标签: reactjs firebase google-cloud-firestore

您好,我正在尝试显示来自 firebase 的数据,它运行良好,但是当我添加条件 where() 以将 uid 与数据库中存在的 id 进行比较时

但是在console.log中,看起来还不错,就好像在用户请求和getOrders()请求之间;延迟太短,他没时间找uid

const [orders, setOrders] = useState([]);
  const [user, setUser] = useState('');

  useEffect( () => {
   fire.auth().onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
        console.log(user);
            } else {
        setUser(null);
      }
    
    });
getOrders();
 
}, []);

 function getOrders() {
    fire.firestore().collection("orders")
    
    .where('uid', '==', `${user.uid}`)
    .where('statut', '==', 'Active')
    .onSnapshot(function (querySnapshot) {
      setOrders(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          orderid: doc.data().id,
          statut: doc.data().statut,
          nomproduit: doc.data().nomproduit
          
        }))
      );
    });
  }

enter image description here

感谢您的帮助。

1 个答案:

答案 0 :(得分:4)

考虑将 uid 作为参数传递给 getOrders() 并在 user 准备好时调用它。像这样

const [orders, setOrders] = useState([]);
  const [user, setUser] = useState('');

  useEffect( () => {
   fire.auth().onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
        console.log(user);
        getOrders(user.uid);
            } else {
        setUser(null);
      }
    
    });
}, []);

 function getOrders(uid) {
    fire.firestore().collection("orders")
    
    .where('uid', '==', `${uid}`)
    .where('statut', '==', 'Active')
    .onSnapshot(function (querySnapshot) {
      setOrders(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          orderid: doc.data().id,
          statut: doc.data().statut,
          nomproduit: doc.data().nomproduit
          
        }))
      );
    });
  }

您可以做的另一件事是像这样将 user 作为依赖项传递到 useEffect() 钩子中

useEffect( () => {
   fire.auth().onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
        console.log(user); 
      } else {
        setUser(null);
      }
    
    });
   getOrders();
}, [user]);

这将导致 useEffect 在用户更改时再次运行。不是最好的方法,但性能明智,仅供参考。