反应 | React Hook useEffect 缺少依赖项答案

【问题标题】：React | React Hook useEffect has a missing dependency反应 | React Hook useEffect 缺少依赖项
【发布时间】：2021-05-16 22:31:47
【问题描述】：

我只想在首次使用 react 钩子打开页面时在首次打开时更新商店中的值。为此，我将 useEffect '[]' 的第二个参数设为空列表。没有什么可以阻止它工作，但我从 ESLint 规则中得到警告：React Hook useEffect 缺少依赖项：'changeCount'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps。如何删除此警告？

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

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

  return (
  ..
  )}

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

将changeCount 移动到useEffect 中

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

    changeCount();
  },[])

  return (
  ..
  )
}

【讨论】：

【解决方案2】：

TLDR

修复 eslint 配置“react-hooks/exhaustive-deps”

回答

这是 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. Rules of Hooks - React Document

【讨论】：

我认为即使建议禁用整个规则也是一个糟糕的主意。
我是这么认为的 :) 但这只是解决它的一些方法

【解决方案3】：

使用此语法在您的依赖项数组之前删除此 eslint 警告，如下所示：

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

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

return (
  ..
)}

【讨论】：

您永远不应该禁用所有警告。指定要禁用它的警告，最好在代码中留下注释，特别是对于文档声称触发它的代码总是错误的警告......

【解决方案4】：

changeCount 是一个不是setState 或钩子的函数。由于你在useEffect 中使用它，React 会警告你。因为它警告你阅读this article

上面的一些答案建议你禁用检查，我建议只禁用你正在处理的那个。但是，通常您无需担心警告。

【讨论】：

【解决方案5】：

创建自定义挂钩 ...

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

像这样吃

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

不仅你会摆脱这个警告......而且更清楚的是，这个效果只会被执行onMount......

【讨论】：