React useEffect hook 运行无限循环尽管有静态依赖

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 ref 中，这样它就是一个稳定的引用。 auth 似乎也是一个外部依赖项。如果它在组件外部，则可以，但如果它在组件内部，则应将其添加到依赖项数组中。

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]);

  ...
}

React useEffect hook 运行无限循环尽管有静态依赖

React useEffect hook running infinite loop despite static dependencies

google-cloud-firestore

react-hooks

use-effect

React useEffect hook 运行 无限循环尽管有静态依赖

React useEffect hook running infinite loop despite static dependencies

google-cloud-firestore

react-hooks

use-effect

React useEffect hook 运行无限循环尽管有静态依赖