React Hook useEffect 缺少一个依赖项：'dispatch'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps答案

【问题标题】：React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array react-hooks/exhaustive-depsReact Hook useEffect 缺少一个依赖项：'dispatch'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps
【发布时间】：2021-12-06 03:37:23
【问题描述】：

谁能帮我摆脱这个警告

React Hook useEffect 缺少一个依赖项：'dispatch'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

这是我的代码

function Register(props) {
  const inusers=useSelector( (state) => {return state});
  const history=useHistory()
  const dispatch=useDispatch();
  // const formik = useFormikContext();


  useEffect( () => {
    dispatch(fetchUser())
  },[])

【问题讨论】：

这能回答你的问题吗？ How to fix missing dependency warning when using useEffect React Hook

标签： reactjs react-hooks

【解决方案1】：

只需在依赖项之间添加调度：

  useEffect(() => {
       dispatch(fetchUser())
  },[dispatch])

Dispatch 是一个可以安全添加的依赖项，它不会导致无限循环。有关调度为何会发生变化（以及何时会发生变化）的更多见解，请查看：

What are the cases where Redux dispatch could change?

更新：来自 react-redux documentation

【讨论】：

【解决方案2】：

你可以在 useEffect 依赖 eslint-disable-next-line react-hooks/exhaustive-deps 上面写评论，它会停止抱怨。

React 保证调度函数的身份是稳定的，并且不会在重新渲染时改变。这就是为什么从 useEffect 或 useCallback 依赖列表中省略是安全的。

所以忽略这个警告是安全的。

function Register(props) {
  const inusers=useSelector( (state) => {return state});
  const history=useHistory()
  const dispatch=useDispatch();
  // const formik = useFormikContext();


  useEffect( () => {
    dispatch(fetchUser())

    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[])

【讨论】：

我不建议简单地告诉 ESLint 忽略这个问题。在大多数情况下不是问题，但如果底层存储因任何原因发生更改，则可能会导致问题
@AndreaCostanzo1 React 保证调度函数的身份是稳定的，并且不会在重新渲染时改变。这就是为什么从 useEffect 或 useCallback 依赖列表中省略是安全的。
我们没有使用 react 使用 reducer 而是 react-redux 使用 dispatch！从源代码 (github.com/reduxjs/react-redux/blob/master/src/hooks/…) 中可以看出，我们正在返回 store.dispatch。如果底层存储发生变化怎么办？
我已经更新了我的帖子以说明我在说什么并添加了一个文档链接