React Hook Useffect对于空数组依赖性缺失了依赖性

发布于 2025-02-05 14:43:58 字数 458 浏览 1 评论 0原文

我缺少依赖性警告。

React Hook UseFect的依赖性缺失：'FetchFeatured'。包括它，要么删除依赖项数组

我的代码

useEffect(() => {
        const fetchFeatured = () => {
            onSnapshot(faeturedCollectionRef, (snapshot) =>
                setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
            )
        }
        fetchFeatured();
    }, [])

我已经使用空数组来避免循环。

原文

I am getting missing dependency warning.

React Hook useEffect has a missing dependency: 'fetchFeatured'. Either include it or remove the dependency array

My Code

useEffect(() => {
        const fetchFeatured = () => {
            onSnapshot(faeturedCollectionRef, (snapshot) =>
                setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
            )
        }
        fetchFeatured();
    }, [])

I have used empty array for avoiding loop.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羞稚 2025-02-12 14:43:58

您可以通过这样的评论来避免警告

 useEffect(() => {
    const fetchFeatured = () => {
        onSnapshot(faeturedCollectionRef, (snapshot) =>
            setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
        )
    }
    fetchFeatured();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

you can avoid the waring by disabling it with a comment like this

 useEffect(() => {
    const fetchFeatured = () => {
        onSnapshot(faeturedCollectionRef, (snapshot) =>
            setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
        )
    }
    fetchFeatured();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

回复收藏 0 原文

云仙小弟 2025-02-12 14:43:58

该警告的主要目的是防止开发人员在其效果中缺失依赖性，并失去某些行为或意想不到的效果。在这种情况下，您可以

忽略它。
在整个项目中抑制该规则：转到.eslintrc文件，然后更改'react-hooks/afterive-deps'：'warn' 'react-hooks /详尽的deps'：'off'
仅在这种情况下supress规则：

useEffect(() => {
    const fetchFeatured = () => {
        onSnapshot(faeturedCollectionRef, (snapshot) =>
            setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
            )
        }
        fetchFeatured();
// eslint-disable-line react-hooks/exhaustive-deps
}, [])

The main purpose of the this warning is to prevent the developers from missing dependencies inside their effect and lost some behavior or unintended effect. In this case, you can

Just ignore it.
Suppress that rule for the entire project: Go to .eslintrc file and change 'react-hooks/exhaustive-deps': 'warn' to 'react-hooks/exhaustive-deps': 'off'
Supress the rule only in this instance:

useEffect(() => {
    const fetchFeatured = () => {
        onSnapshot(faeturedCollectionRef, (snapshot) =>
            setFeatured(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
            )
        }
        fetchFeatured();
// eslint-disable-line react-hooks/exhaustive-deps
}, [])

回复收藏 0 原文

~没有更多了~