Question

反应挂钩useEffect缺少依赖项：'dispatch'。要么包含它，要么删除依赖项数组react-hooks / exhaustive-deps

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

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

您可以将dispatch添加到useEffect内的方括号中。

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 3

最新答案，但所有投票均投给第一个答案

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

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

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

3 个答案: