我在reactjs中从firebase获取数据。我面临的问题是没有刷新页面数据没有得到更新。
正如你可以看到在下面的截图,我在一个表中显示数据,我显示编辑按钮,并通过点击它,我更新数据。数据成功地得到更新在firebase,但在这里的页面,它是没有得到更新,直到我不刷新页面。
截图:
取数:
const [activityproduct,setActvityProduct] =useState([])
useEffect(() => {
let isMounted = true;
const doFetch = async () => {
const querySnapshot = await getDocs(collection(dbname, "tablename"));
const arr = [];
querySnapshot.forEach((doc) => {
arr.push({
...doc.data(),
id: doc.id,
});
if (isMounted) setActvityProduct(arr);
});
};
doFetch()
.catch((err) => {
if (!isMounted) return;
console.error("failed to fetch data", err);
});
return () => {
isMounted = false;
};
}, []);
更新数据:
const handleUpdate =async()=>{
const updateData = doc(dbname,"tablename",id)
await updateDoc(updateData,{name1:title})
setTitle("")
}
此处显示数据:
{
activityproduct.map(values=>
<tr key={values.id} id={values.id}>
<td>{values.name1} </td>
<td> <button className='btn' onClick={()=>handleEdit(values.id,values.name1)}> Edit </button> </td>
</tr>
)
}
1条答案
按热度按时间hrirmatl1#
将其作为社区wiki共享,以造福他人
正如@Frank货车Puffelen所提到的
您调用的是getData,它只读取数据一次。如果您想收听更新:firebase.google.com/docs/firestore/query-data/listen