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

Question

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 的情况下删除此警告，这对于避免其他错误很有用。

Answer 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;

Answer 2

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的情况下删除此警告，这对于避免其他错误很有用。

Answer 3

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的情况下删除此警告，这对于避免其他错误很有用。

Answer 4

只需将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;

第二种情况：

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

  useEffect(() => {
    dispatch(getUserInformation());
  }, []);

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

export default Component;

通过添加这些依赖项，您的 useEffect 可能会导致重新渲染或根本不重新渲染。 这完全取决于您的数据和使用它的环境。

无论如何，如果您不希望同时遵循上述两种方法，那么 //ts-ignore 可以工作，但我不建议这样做，因为从长远来看这可能会产生错误。