我们应该使用Auth.onAuthStateChanged()在firebase中返回的退订方法来清理内存泄漏吗?<

Question

下面是我的代码:

import React, {useState, useRef, useEffect} from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';
import Spinner from '../components/Spinner';
const CreateListing = () => {
const [geoLocationEnabled, setGeolocationEnabled] = useState(true);
const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({
type: 'rent',
name: '',
bedrooms: 1,
bathrooms: 1,
parking: false,
furnished: false,
address: '',
offer: false,
regularPrice: 0,
discountedPrice: 0,
images: {},
latitude: 0,
longitude: 0
});
const auth = getAuth();
const navigate = useNavigate();
const isMounted = useRef(true);
useEffect(() => {
if (isMounted.current) {
onAuthStateChanged(auth, (user) => {
if (user) {
setFormData({
...formData,
userRef: user.uid
});
}
else {
navigate('/sign-in');
}        
});                              
}
return () => {
isMounted.current = false;
}  
}, []);
if (loading) {
return <Spinner />
}
return (    
<div>CreateListing</div>
)
}
export default CreateListing

我得到这个错误:

React Hook useEffect缺少依赖项:'auth'， 'formData'和'navigate'。要么包含它们，要么删除依赖项数组。你也可以做一个功能更新'setFormData(f =>如果你只需要'setFormData'中的'formData'调用react-hooks/exhaustion -deps

为了解决这个问题，我在useEffect数组中添加了isMounted作为依赖项，并在依赖项数组行上方添加了// eslint-disable-next-line行。这解决了警告，一切工作正常。但是，这段代码仍然存在一个问题。尽管如此，当组件卸载onAuthStatus监听器实际上仍然在运行，只是它不能做任何事情。

我发现了一个更好的解决方案，即onAuthStatus()返回一个可以在useEffect的返回函数中调用的退订方法。这将确保侦听器不会被取消订阅，并且在组件卸载时不会导致任何内存泄漏。

onAuthStatus文档的链接是:

https://firebase.google.com/docs/reference/js/auth.auth.md#authonauthstatechanged

另外，请注意，当我单击退订链接时，在返回:下，我得到一个404错误…这是不寻常的

我认为下面的解决方案应该更好，但我不确定:

useEffect(()=>{
const unsub = onAuthStateChanged(auth, (user)=>{
if (user) {
setFormData({
...formData,
userRef: user.uid
});
}
else {
navigate('/sign-in');
}
});
return unsub();
},[]);

谁能告诉我怎么做?如果有更好的解决方案，请分享…提前谢谢你。

Answer 1

你所做的应该没问题。尽管在全局级别为整个应用程序设置单个监听器(不使用钩子)是完全可以的。听众并没有真正"泄漏"。任何东西。当用户的状态发生变化时，它会一直被调用，所以当这种情况发生时，你可以决定你想要对整个应用做什么。