React Hook useEffect 缺少依赖项：'execute'

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)
}

TLDR 是我需要每 15 秒或在 dependency 定义的某些全局状态更改时向 fs() 定义的特定 API 函数发出获取请求。我还想捕获数据和任何错误，因此我用几个 then() 和 catch() 块将 fs() 包裹起来。

下面的代码在我的功能组件中执行时在顶部给我警告：

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 指定为依赖项会导致应用不断重新呈现。我在调用 setInterval() 之前运行ning execute() 因为我希望查询运行每 15 秒和组件首次呈现时。

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

Answer 1

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

Answer 2

linting 错误非常直接，只是准确说明了您需要做什么，要么将 useEffect 的依赖项数组留空，要么将 execute 函数添加到其中。

基本上，因为您在效果回调中访问 execute 函数，并且由于它是在与效果相同的范围内创建的，因此 React 要求它是一个依赖项。

要解决连续重新渲染的问题，您需要使用 useCallback

使您的执行函数成为记忆函数

解决它应该很简单：

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])

React Hook useEffect 缺少依赖项：'execute'

React Hook useEffect has a missing dependency: 'execute'

fetch

setinterval

reactjs

usecallback

use-effect