如何修复 React Redux 和 React Hook useEffect 缺少依赖项：'dispatch'

Posted 2023-02-21

【中文标题】如何修复 React Redux 和 React Hook useEffect 缺少依赖项：\'dispatch\'

【英文标题】：How to fix React Redux and React Hook useEffect has a missing dependency: 'dispatch'如何修复 React Redux 和 React Hook useEffect 缺少依赖项：'dispatch'

【发布时间】：2020-05-27 04:54:31

【问题描述】：

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

我在这样的功能组件上使用来自 React Redux 的 useDispatch() Hook：

const Component = () => 
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => 
    dispatch(getUserInformation());
  , [userId]);

  return (
    <div>Hello userName</div>
  );
;

export default Component;

如何在不删除依赖数组 react-hooks/exhaustive-deps 的情况下删除此警告，这对于避免其他错误很有用。

【参考方案1】：

为避免该警告，只需将dispatch 添加到依赖数组即可。这不会调用重新渲染，因为调度值不会改变。

const Component = () => 
  const dispatch = useDispatch();
  const userName = useSelect(state => state.user.name);

  useEffect(() => 
    dispatch(getUserInformation());
  , [userId, dispatch]);

  return (
    <div>Hello userName</div>
  );
;

export default Component;