React | React Hook useEffect缺少依赖项

Question

我想在页面首次打开时，使用React Hook仅更新存储中的一个值一次。为此，我将useEffect的第二个参数设置为空列表 '[]'。这样做没有阻止它正常工作，但是我从ESLint规则中收到了一个警告： React Hook useEffect有一个缺失依赖项: 'changeCount'。请在依赖项数组中包含它或删除该依赖项数组 react-hooks/exhaustive-deps。如何解除此警告？

const App = ({UserStore:{setCount, count}}) => {
  const changeCount = () => {
    setCount();
  }

  useEffect(() => {
    changeCount();
  },[])

  return (
  ..
  )}

- aliosmankepir

Answer 1

创建一个自定义钩子（hook）...

export const useMountEffect = handler => useEffect(handler, []);

像这样消费它

useMountEffect(() => {
  changeCount();
});

不仅您可以摆脱此警告......而且将更清楚地表明此效果仅在 onMount 上执行...

- Hend El-Sahli

Answer 2

使用以下语法在依赖项数组之前删除此eslint警告：

const App = ({UserStore:{setCount, count}}) => {
const changeCount = () => {
    setCount();
}

useEffect(() => {
    changeCount();
    // eslint-disable-next-line
},[])

return (
  ..
)}

- Abdelmonaem Shahat

---

你不应该禁用所有警告。应该指定要禁用的警告，并在代码中留下注释，特别是对于文档声称触发它的代码总是错误的警告。 - ThiefMaster

Answer 3

changeCount 是一个函数，不是 setState 或 hooks。由于您在 useEffect 中使用它，React 将发出警告。关于为什么会发出警告，请参阅本文

以上答案中的一些建议您禁用检查，我建议只禁用您正在处理的部分。然而，通常情况下您无需担心警告。

- kunquan

Answer 4

将 changeCount 移动到 useEffect 内部。

const App = ({UserStore:{setCount, count}}) => {
  useEffect(() => {
    const changeCount = () => {
      setCount();
    }

    changeCount();
  },[])

  return (
  ..
  )
}

- p1uton

Answer 5

简述

修复eslint配置"react-hooks/exhaustive-deps"

答案

这是一个与hook有关的eslint错误，因此可以尝试修复eslint配置如下：

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "off" // Checks effect dependencies
  }
}

但是它可能使您的钩子功能错误，所以另一种方法是使用 /* eslint-disable */

参考文献

01. 钩子规则 - React 文档

- Stark Jeon

---

我认为甚至建议禁用整个规则都是一个糟糕的想法。 - ThiefMaster

我认为是的 :) 但这只是一种解决方法。 - Stark Jeon