本文主要讲解 使用 useEffect 在函数式组件中只执行一次，但是会报警告的问题该如何去解决

首先只执行一次的话，使用函数作为useEffect回调，然后依赖项传空，像这样

useEffect(fetchBusinesses, [])

但是这样有一个问题，就是如果不填写依赖项，eslint 会抱一个警告，提示你需要依赖 fetchBusinesses

1. 解决警告的一种方法是：声明内部功能?useEffect()，将 fetchBussinesses 方法放在 effect 内部去声明

useEffect(() => { function fetchBusinesses() { ... } fetchBusinesses() }, [])

2. 第二种，使用?useCallback()? const fetchBusinesses = useCallback(() => { ... }, []) useEffect(() => { fetchBusinesses() }, [fetchBusinesses])

如果以上两种都没办法满足你

3. 第三种，禁用eslint的警告 useEffect(() => { fetchBusinesses() }, []) // eslint-disable-line react-hooks/exhaustive-deps 4.?如果要在整个项目中删除警告，可以将其添加到eslint配置中：

[ESLint] Feedback for 'exhaustive-deps' lint rule · Issue #14920 · facebook/react · GitHubhttps://github.com/facebook/react/issues/14920具体可以参考这个文章

{ "plugins": ["react-hooks"], "rules": { "react-hooks/exhaustive-deps": 0 } }

?

?

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。