您好,我正在尝试显示来自 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
}))
);
});
}
感谢您的帮助。
答案 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
在用户更改时再次运行。不是最好的方法,但性能明智,仅供参考。