如何修复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 的情况下解除此警告，该依赖数组可以帮助避免其他错误。

- Ignacio

Answer 1

为了避免那个警告，只需将dispatch添加到依赖项数组中即可。这样做不会触发重新渲染，因为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;

- Muhammad Zeeshan

Answer 2

只需将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可以工作，但我不建议这样做，因为这可能会在长期运行中创建错误。

- Ritik Banger