React useEffect钩子运行无限循环，尽管存在静态依赖关系

Question

有人能告诉我这段代码的哪一部分导致了无限循环吗？我也试过用useCallback来包装它，但它仍然会永远运行。

• slug是不会随时间变化的页面url
• likesCollectionRef也将保持不变
• isAuth可以更改超时时间，具体取决于用户是登录还是注销

export default function CommentForm({ slug, isAuth, setReloadTS }) {
const [isLiked, setIsLiked] = useState(false);
const likesCollectionRef = collection(fireStore, 'likes');
useEffect(() => {
if (!isAuth) return;
const qry = query(
likesCollectionRef,
where('slug', '==', slug),
where('author.id', '==', auth.currentUser.uid)
);
const findLike = async () => {
const data = await getDocs(qry);
console.log(`initial like: ${data.docs}`);
setIsLiked(data.docs !== 'undefined' && data.docs);
};
findLike();
}, [slug, isAuth, likesCollectionRef]);
}

Answer 1

likesCollectionRef在每个渲染周期中声明。将likes集合引用放在React引用中，使其成为稳定的引用。CCD_ 2似乎也是一个外部依赖项。如果它在组件的外部，这是可以的，但如果它是组件的内部，则应该将其添加到依赖数组中。

export default function CommentForm({ slug, isAuth, setReloadTS }) {
const [isLiked, setIsLiked] = useState(false);
const likesCollectionRef = useref(collection(fireStore, 'likes'));
useEffect(() => {
if (!isAuth) return;
const qry = query(
likesCollectionRef.current,
where('slug', '==', slug),
where('author.id', '==', auth.currentUser.uid)
);
const findLike = async () => {
const data = await getDocs(qry);
console.log(`initial like: ${data.docs}`);
setIsLiked(data.docs !== 'undefined' && data.docs);
};
findLike();
}, [isAuth, likesCollectionRef, slug]);
...
}