Firebase Firestore数据加载在中，但在react.js中渲染时，数据出现后不久就消失了

Question

我调用useEffect内部的函数。这意味着函数不会被重复调用，但由于某种原因，数据似乎在短时间后被删除

const [following, setFollowing] = useState([])
useEffect(() => {

getUser()
getFollowing()


}, []);

这里的函数获取当前用户当前关注的所有用户。它似乎工作得很好，控制台记录追随者的数组会返回预期的用户，并显示在屏幕上。

async function getFollowing()
{
const followerRef = query(collection(db, "followers"), where("follower", "==", auth.currentUser.uid));
const querySnapshot = await getDocs(followerRef);
let followerArray = []
querySnapshot.forEach((doc) => {
const storageRef = ref(storage, (doc.data().followingEmail) + "/pp");
getDownloadURL(storageRef).then((url) => {
followerArray.push([doc.data().followingEmail, url, doc.data().following]);

}).catch((error) => {
followerArray.push([doc.data().followingEmail, musicIcon, doc.data().following]);
// setFollowing(followerArray)
});  

});
console.log("follower array");
console.log(followerArray);
setFollowing(followerArray)
// console.log(following)
}

这就是我用来遍历所有元素的方法。元素确实按顺序出现在页面上，并且格式正确，但一旦加载，它们就会以某种方式消失。我不确定是什么原因造成的。也许我应该让页面等待数据从firebase加载进来。也许我应该有一些条件语句来阻止数据消失。

{following.map((f) => 
<Row key={f[2]} className="hover">

<Col xs={2}>
<div className=""> 
<img src={f[1]} className="smallPhoto"  />
</div>
</Col>
<Col xs={10}className="">
<p className= "followText">{f[0]}</p>
</Col>



</Row>
)}

以下是刷新页面时的输出https://giphy.com/gifs/uDtDpY198yCRn6S2CW

我尝试了很多解决方案，但似乎都不起作用。

Answer 1

如果在foreach中抛出promise，并将空数组设置为状态，则应该等待promise在数组中有内容

//this fn should be in another file.
async function getFollowing() {
const followerRef = query(coll(db, "followers"), where(...));
const querySnapshot = await getDocs(followerRef);
let followerArray = [];
const promises = querySnapshot.map((doc) => {
const storageRef = ref(storage, `${followingEmail}/pp`);
// this part is hurting my eyes, xD
// why you are adding [] instead of {} into the array?
return getDownloadURL(storageRef)
.then((url) => followerArray.push([fields]))
.catch((error) => followerArray.push([fields]));          
});
});
await Promise.all(promises);
console.log("follower array", followerArray);
return followerArray;     
}
//inside your component
const YourComponent = () => {
const [following, setFollowing] = useState([]);
useEffect(() => {      
getUser();
getFollowing().then(array => setFollowing(array));
}, []);
};

Answer 2

非常感谢您的支持。这个程序现在似乎正在按计划运行。我认为useEffect的变化起到了关键作用。这就是我的代码现在的样子：

}, []);
useEffect(() => {

getUser()
getFollowing().then(array => setFollowing(array));
getFollowers()
}, []);

getFollowing函数的更改有助于解决问题

let getFollowing = async () =>
{
const followerRef = query(collection(db, "followers"), where("follower", "==", JSON.parse(localStorage.getItem("userID"))));
let followerArray = [];
await getDocs(followerRef).then((querySnapshot) =>{
querySnapshot.forEach((doc) => {
const storageRef = ref(storage, (doc.data().followingEmail) + "/pp");
getDownloadURL(storageRef)
.then((url) => { followerArray.push([doc.data().followingEmail, url, doc.data().following]);
})
.catch((error) => {followerArray.push([doc.data().followingEmail, musicIcon, doc.data().following]);
});   
})  
} )

console.log("followerArray", followerArray)
return followerArray;
}