问题描述
我在尝试获取数据时遇到问题。不幸的是,当我控制台记录结果时,在初始页面加载时,数据为空。然而,当我重新渲染组件时,我成功接收到数据。
这是我目前拥有的:
function Followers({
urlname,navigation
}) {
const [followersData,setfollowersData] = useState(null)
useEffect(() => {
// Fetch Followers data
const dataRef = firestore().collection('usernames')
dataRef.doc(urlname)
.collection('Following')
.get()
.then((docSnapshot) => {
let items = []
docSnapshot.forEach(doc => {
let item = {}
// Store followers,display name and follows info
dataRef
.doc(doc.id)
.get()
.then((followerDoc) => {
const data = followerDoc.data();
item.profileName = doc.id
item.displayName = data.userName
item.followerCount = data.followers
item.followingCount = data.following
})
items.push(item)
})
setfollowersData(items)
})
},[])
return (
<>
{console.log('followersData',followersData)}
</>
)
}
export default Followers
我在第一页加载时收到的控制台日志是:
followersData null
followersData [{},{},{],{}]
followersData [{},{}]
当组件再次呈现时,我在控制台日志中收到此信息:
followersData [all my data in 4 different objects gets logged]
解决方法
使用 prev state 为每个 item 分别调用 setfollwersData()
并设置初始状态为空数组。
function Followers({
urlname,navigation
}) {
const [followersData,setfollowersData] = useState([])
useEffect(() => {
// Fetch Followers data
const dataRef = firestore().collection('usernames')
dataRef.doc(urlname)
.collection('Following')
.get()
.then((docSnapshot) => {
docSnapshot.forEach(doc => {
let item = {}
// Store followers,display name and follows info
dataRef
.doc(doc.id)
.get()
.then((followerDoc) => {
const data = followerDoc.data();
item.profileName = doc.id
item.displayName = data.userName
item.followerCount = data.followers
item.followingCount = data.following
setfollowersData(prev => [...prev,item])
})
})
})
},[])
return (
<>
{console.log('followersData',followersData)}
</>
)
}
export default Followers
,
William 的解决方案很好,但作为一种选择,等待所有响应并更新一次状态。
const promises = [];
docSnapshot.forEach((doc) => {
const promise = dataRef
.doc(doc.id)
.get()
.then((followerDoc) => {
const data = followerDoc.data()
return {
profileName: doc.id,displayName: data.userName,followerCount: data.followers,followingCount: data.following,}
});
promises.push(promise);
})
Promise.all(promises).then(setfollowersData);