React Hook useEffect缺少依赖项:“执行”

尽管尝试了不同的尝试,但我似乎找不到答案。我不断收到错误消息:

 Line 18:5:  React Hook useEffect has a missing dependency: 'execute'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
printWarnings

在此文件上:

import {useEffect,useState} from 'react'

export const createEffect = (fs,dependency) => {
    const[data,setData] = useState({})

    const execute = () => (
        fs().then(res => {
            setData(res)
        }).catch(err => {
            // do some magic
        })
    )

    useEffect(() => {
        execute()
        const interval = setInterval(execute,15000)
        return(() => clearInterval(interval))
    },[dependency])

    return(data)
}

TLTL是我需要每15秒或fs()定义的某些全局状态更改时,对dependency定义的特定API函数进行提取请求。我还想捕获数据和任何错误,因此为什么用两个fs()then()块包裹catch()

以下代码在我在功能组件中执行警告时,在顶部给出警告:

import createEffect from './components/createEffect'
~~~
let api = new api('http://localhost:8080/v1');
const[status,updateStatus] = useState(true);
const summary = createEffect(api.getSummary,status)

有什么主意我可以解决这个问题吗?我是React useEffect的新手,如果这是执行类似操作的正确方法,则不是100%?在我的useEffect调用中将execute指定为依赖项会导致应用程序不断重新呈现。在调用execute()之前,我正在运行setInterval(),因为我希望查询每15秒以及组件首次呈现时运行一​​次。

更多信息:我正在将一个仪表板作为一个示例项目,并希望每15秒或在某些全局状态更改时立即查询多个api端点。如果全局状态确实发生了变化,我想将HTTP轮询从剩下的任何时间重置为15秒。

qq1988110 回答:React Hook useEffect缺少依赖项:“执行”

插入错误非常简单,只说明您需要做什么,要么将useEffect的依赖项数组保留为空,要么将execute函数添加到其中。

基本上,因为您在效果回调内部访问了execute函数,并且它是在与效果相同的作用域内创建的,所以React要求它是一个依赖项。

要解决连续重新呈现的问题,您需要使用useCallback

使execute函数成为已记忆的函数。

解决它应该很简单:

const execute = useCallback(() => (
    fs().then(res => {
        setData(res)
    }).catch(err => {
        // do some magic
    })
),[setData]);

useEffect(() => {
        execute()
        const interval = setInterval(execute,15000)
        return(() => clearInterval(interval))
    },[execute])
,

我认为您可以添加execute作为依赖项,因为函数定义本身没有改变。只需在每次调用后调试组件是否重新渲染即可。我认为他们不应该。

本文链接:https://www.f2er.com/3120924.html

大家都在问