Question

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

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

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

  return (
  ..
  )}

Answer 1

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

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

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

return (
  ..
)}

Answer 2

"<uses-permission android:name="android.permission.INTERNET"/>" 是一个不是 changeCount 或钩子的函数。由于您在 setState 中使用它，因此 React 会警告您。因为它警告你阅读this article

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

Answer 3

在changeCount内移动useEffect

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

    changeCount();
  },[])

  return (
  ..
  )
}

Answer 4

创建自定义钩子...

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

喜欢吃

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

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

Answer 5

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

反应 | React Hook useEffect 缺少依赖项

5 个答案:

TLDR

答案

参考