使用React 16.8.6(在之前的版本16.8.3上很好),当我试图阻止fetch请求上的无限循环时,我得到了这个错误:

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

我一直无法找到一个解决办法来停止这个无限循环。我想远离使用useReducer()。我确实找到了关于'筋疲力尽-deps' lint规则#14920的讨论[ESLint]反馈,其中一个可能的解决方案是,如果你认为你知道你在做什么,你可以总是// ESLint - disabled -next-line react-hooks/详尽-deps。我对我正在做的事情没有信心,所以我还没有尝试实现它。

我有这个当前的设置,React钩子useEffect连续运行永远/无限循环,唯一的评论是关于useCallback(),我不熟悉。

我目前如何使用useEffect()(我只想在开始时运行一次,类似componentDidMount()):

useEffect(() => {
    fetchBusinesses();
  }, []);
const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };

当前回答

在项目中禁用此警告

将这个"react-hooks/ exhaustion -deps": "off"添加到.eslintrc.js文件中

其他回答

这些警告对于查找不一致更新的组件非常有帮助:从依赖项列表中省略函数是否安全?

然而,如果你想在你的项目中删除警告,你可以添加到你的ESLint配置:

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }

这不是一个特定于问题用例的答案,而是更普遍的情况,并涵盖了useEffect或提取和导入不工作的情况。 useRef senario:

有时情况是,useEffect应该有一个空数组,你仍然想在useEffect部分的状态中使用,但仍然不想将它们作为依赖注入,你也可以尝试useCallback,现在react抱怨useCallback的依赖,你卡住了。 在这种情况下,在某些情况下可以使用useRef。例如:

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

在使用这种技术时,您应该小心,并注意useRef不会激活渲染进程。

const [mount, setMount] = useState(false)
const fetchBusinesses = () => {
   // Function definition
}
useEffect(() => {
   if(!mount) {
      setMount(true);
      fetchBusinesses();
   }
},[fetchBusinesses, mount]);

这个解决方案非常简单,你不需要重写ESLint警告。只需维护一个标志,以检查组件是否已挂载。

React也给出了解决方案。他们建议你使用useCallback,它会返回你函数的一个内存版本:

'fetchBusinesses'函数使useEffect钩子(在NN行)的依赖关系在每次渲染时发生变化。为了解决这个问题,将'fetchBusinesses'定义包装到它自己的useCallback() Hook react-hooks/竭-deps中

useCallback使用起来很简单,因为它与useEffect具有相同的签名。区别在于useCallback返回一个函数。 它看起来是这样的:

 const fetchBusinesses = useCallback( () => {
        return fetch("theURL", {method: "GET"}
    )
    .then(() => { /* Some stuff */ })
    .catch(() => { /* Some error handling */ })
  }, [/* deps */])
  // We have a first effect that uses fetchBusinesses
  useEffect(() => {
    // Do things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);
   // We can have many effects that use fetchBusinesses
  useEffect(() => {
    // Do other things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);

好吧,如果你想从不同的角度来看这个问题,你只需要知道React有哪些非耗尽的选项。你不应该在效果中使用闭包函数的原因之一是在每次渲染时,它都会被重新创建/销毁。

因此,钩子中有多个React方法被认为是稳定的和非耗尽的,在这些方法中,您不必应用到useEffect依赖项,并且反过来也不会破坏React -hooks/竭-deps的约定规则。例如,useReducer或useState的第二个返回变量是一个函数。

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // Non-exhausted - ESLint won't nag about this
}, []);

所以反过来,你可以让所有的外部依赖关系与你在reducer函数中的当前依赖关系共存。

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // Logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);