Question

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

 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秒。

Answer 1

插入错误非常简单，只说明您需要做什么，要么将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])

Answer 2

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

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

2 个答案: