我有一個 useEffect 鉤子，里面有兩個函式，第一個（fetchImages）獲取存盤在 firebase 存盤中的所有用戶影像。
第二個 (loadImages) 等待 fetchImages 并將影像設定為狀態陣列。問題是影像陣列回傳空，除非你轉到不同的頁面然后回來......然后陣列填充了影像網址。
我不確定我的 useEffect 鉤子或我的異步等待位置是否有問題，或者其他什么。對 currentUser 的 if 檢查是因為 currentUser 在第一次加載時回傳 null。
const [images, setImages] = useState([]); // All user images from storage
useEffect(() => {
if (currentUser) {
const fetchImages = async () => {
setLoading(true)
const result = await storage.ref(`images/${currentUser.id}`).listAll();
console.log(result)
const urlPromises = result.items.map((imageRef) =>
imageRef.getDownloadURL()
);
console.log(urlPromises)
return Promise.all(urlPromises);
};
const loadImages = async () => {
const images = await fetchImages();
setImages(images);
setLoading(false);
};
loadImages();
}
console.log(loading)
}, []);
console.log(images, image)
currentUser 用戶背景關系檔案
export const UserContextProvider = ({ children }) => {
const [currentUser, setUser] = useState(null);
// const [currentUser, setUser] = useState('');
useEffect(() => {
let unsubscribeFromAuth = null;
unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
if (userAuth) {
const userRef = await createUserProfileDocument(userAuth);
userRef.onSnapshot(snapShot => {
setUser({
id: snapShot.id,
...snapShot.data()
});
});
} else {
setUser(null)
}
});
return () => {
unsubscribeFromAuth();
};
}, [])
// console.log(unsubscribeFromAuth)
const toggleUser = () => {
auth.signOut()
.then(() => {
window.localStorage.clear();
})
.then(() => {
setUser(null)
})
.catch(e => console.log('There was a error:'(e)))
}
uj5u.com熱心網友回復：
添加currentUser到useEffect鉤子的依賴項陣列。當currentUser狀態更新時，您希望副作用是獲取相關影像或清除它們。
const [images, setImages] = useState([]); // All user images from storage
useEffect(() => {
if (currentUser) {
const fetchImages = async () => {
const result = await storage.ref(`images/${currentUser.id}`).listAll();
const urlPromises = result.items.map((imageRef) =>
imageRef.getDownloadURL()
);
return Promise.all(urlPromises);
};
const loadImages = async () => {
setLoading(true);
try {
const images = await fetchImages();
setImages(images);
} catch(error) {
// handle error, log it, show message, etc...
}
setLoading(false);
};
loadImages();
} else {
setImages([]);
}
}, [currentUser]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375800.html
標籤：javascript 反应 火力基地 反应钩子 使用效果