![](/img/trans.png)
[英]React Native - useState doesn't work in useEffect function
[英]React Native firebase function doesn't fetch correctly under useEffect
我在一個項目中使用 react native 和 firebase firestore 。
我想在帖子屏幕中獲取帖子的一些數據,當我嘗試獲取它時,它從第一次嘗試就不起作用。 我正在使用 useEffect 來避免無限循環,並添加了一個 console.log 來查看實際發生的情況。
應該發生什么: firebase.firestore()...get() 應該從數組內的對象中的 firestore 檢索帖子的數據。 但是,在使用useEffect的時候,第一次是不成功的。 我在整個 fetch 之后設置了一個 console.log 來檢查 arr.length !== 0 並且我可以清楚地看到 arr.length === 0。
然而,這是奇怪的事情,如果我讓 useEffect 無限期地運行,從第二次嘗試它就可以很好地檢索數據。 關於如何解決問題的任何想法?
const [post, setPost] = useState([]);
useEffect(() => {
firebase.firestore()
.collection("allPosts")
.where(firebase.firestore.FieldPath.documentId(), '==', props.route.params.postId)
.get()
.then((snapshot) => {
let data = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data }
})
setPost(data)
})
if (post.length !== 0) {
console.log('Worked')
} else {
console.log('Empty')
}
}, [])
編輯:const [post, setPost] = useState(null);
useEffect(() => {
// 1
firebase.firestore()
.collection("allPosts")
.where(firebase.firestore.FieldPath.documentId(), '==', props.route.params.postId)
.get()
.then((snapshot) => {
//2
let data = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return { id, ...data }
})
setPost(data)
//3
if (data.length !== 0) {
console.log('Worked')
} else {
console.log('Empty')
}
console.log(post)
})
}, [])
data.length 的控制台日志返回工作,post(last) 的控制台日志返回空。 這是我不明白的,為什么?
代碼行為正常。 您應該將console.log
移動到then
。 現在的等待將按以下順序執行:
const [post, setPost] = useState([]);
useEffect(() => {
// 1
firebase.firestore()
.collection("allPosts")
.where(firebase.firestore.FieldPath.documentId(), '==', props.route.params.postId)
.get()
.then((snapshot) => {
//3
let data = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return {
id,
...data
}
})
setPost(data)
})
//2
if (post.length !== 0) {
console.log('Worked')
} else {
console.log('Empty')
}
}, [])
這就是您在第一次嘗試中看不到任何內容的原因。 在從 firestore 加載異步數據之前執行console.log
。
將您的代碼更改為此以使其按預期工作:
const [post, setPost] = useState([]);
useEffect(() => {
// 1
firebase.firestore()
.collection("allPosts")
.where(firebase.firestore.FieldPath.documentId(), '==', props.route.params.postId)
.get()
.then((snapshot) => {
//2
let data = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return {
id,
...data
}
})
setPost(data)
//3
if (data.length !== 0) {
console.log('Worked')
} else {
console.log('Empty')
}
})
}, [])
您還可以使用另一個useEffect
來記錄更改的數據:
useEffect(()=>{
if (post.length !== 0) {
console.log('Worked')
} else {
console.log('Empty')
}
},[post])
或者直接在渲染函數中記錄它。
編輯:
const [post, setPost] = useState(null);
useEffect(() => {
// 1
firebase.firestore()
.collection("allPosts")
.where(firebase.firestore.FieldPath.documentId(), '==', props.route.params.postId)
.get()
.then((snapshot) => {
//2
let data = snapshot.docs.map(doc => {
const data = doc.data();
const id = doc.id;
return {
id,
...data
}
})
setPost(data)
//3
if (data.length !== 0) {
console.log('Worked')
} else {
console.log('Empty')
}
console.log(post)
})
}, [])
data.length 的控制台日志返回工作,post(last) 的控制台日志返回空。 這是我不明白的,為什么?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.