作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 native react 的新手,并且正在关注有关如何与 firebase auth 连接的媒体教程。一切似乎都正常,但我不断收到以下警告:
警告:无法对卸载的组件执行 React 状态更新。这是一个空操作,但它表明您的应用程序中存在内存泄漏。要修复,请取消 useEffect 清理函数中的所有订阅和异步任务。
我几乎完全按照教程中所说的去做,并尝试了其他一些方法来修复它,但似乎没有任何效果。这是它指向错误的代码:
let currentUserUID = firebase.auth().currentUser.uid;
const [firstName, setFirstName] = useState('');
useEffect(() => {
getUserInfo();
})
async function getUserInfo(){
try {
let doc = await firebase
.firestore()
.collection('users')
.doc(currentUserUID)
.get();
if (!doc.exists){
Alert.alert('No user data found!')
} else {
let dataObj = doc.data();
setFirstName(dataObj.firstName)
}
} catch (err){
Alert.alert('There is an error.', err.message)
}
}
如果有人能帮我解决这个问题并解释到底出了什么问题,那就太好了。
最佳答案
这里的问题是您可能在卸载组件后将状态更新排入队列。由于您是直接异步访问 Firestore,因此您可以使用 React ref 来跟踪在将更新加入队列之前组件是否仍处于挂载状态。
const isMountedRef = React.ref(null);
useEffect(() => {
isMountedRef.current = true; // set true when mounted
return () => isMountedRef.current = false; // clear when unmounted
}, []);
useEffect(() => {
async function getUserInfo(){
try {
let doc = await firebase
.firestore()
.collection('users')
.doc(currentUserUID)
.get();
if (!doc.exists){
Alert.alert('No user data found!')
} else {
let dataObj = doc.data();
if (isMountedRef.current) { // <-- check if still mounted
setFirstName(dataObj.firstName);
}
}
} catch (err){
Alert.alert('There is an error.', err.message)
}
}
getUserInfo();
}, []); // <-- include dependency array, empty to run once when mounting
关于reactjs - Expo React 警告 : Can't perform a React state update on an unmounted component. 这是一个空操作,但它表明您的应用程序中存在内存泄漏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69263875/
我是一名优秀的程序员,十分优秀!