时间戳

首页 > 解决方案 > React Hook useEffect 缺少依赖项：'execute'

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

问题描述

尽管尝试了不同的事情，但我似乎无法找到答案。我不断收到错误：

 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 是我需要fs()每 15 秒或在某些全局状态更改时（由dependency. 我还想捕获数据和任何错误，因此我fs()用几个then()andcatch()块环绕周围。

当我在功能组件中执行以下代码时，它会在顶部给出警告：

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

标签： reactjsfetchsetintervaluse-effectusecallback

解决方案

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

推荐阅读