2021-01-13

React hook报错 React Hook useEffect has missing dependencies解决方案

最近在开发某后台管理系统时使用ESlint来校验写法问题，结果太感人了，几乎所有页面初始化使用useEffect调用接口时都被提示了：

大致意思就是缺少useEffect的依赖，这就让我很头疼了，明明官方说可以直接使用一个空数组来执行默认只执行一次，为什么到了ESlint就不行了呢？翻阅了一些文档，大致的意思就是如果你的副作用没有使用任何依赖，只是单纯的做没有赋值或者调用接口的操作，可以使用空数组，但是如果你的副作用直接或者间接使用了外部的变量，那么你就需要给useEffect的第二个参数传入依赖值，这样可以减少错误的发生，保证数据每次更新时都能获取到。

那么我们究竟如何解决这类问题呢，我个人方案是使用useCallback，至于用法这里就不啰嗦了，可以查阅各种文档。
首先我们可以把需要操作的副作用传入一个useCallback中：

这里我是通过dispatch调用一个后台接口，由于params属于参数，在usecallback内部，所以不属于依赖项。
但是这里的dispatch是实实在在的从props中取到的也就是在useCallback外部拿到的，所以成为一个依赖项。
最终getCusList函数会获取到useCallback的返回函数，然后我们把getCusList函数在写在useEffect方法中：

并且把本身作为一个依赖项传入第二个参数，这样就可以解决直接在useEffect中调用接口导致的缺少依赖问题。

当然这里存在一个情况，如果你的初始化方法并没有在其他地方被调用，那么你就可以直接在useEffect中使用这个方法而不需要使用useCallback属性，如：

如有疑问或者解释不对的地方，请各位大佬们在下面告知

本文地址：https://blog.csdn.net/qq_26732261/article/details/112565590