Как исправить React Redux и React Hook У useEffect отсутствует зависимость: 'dispatch'

Question

React Hook useEffect отсутствует зависимость: «диспетчеризация». Либо включите его, либо удалите массив зависимых реактив-хуков / исчерпывающее-депс

Я использую useDispatch() Хук из React Redux для функционального компонента, подобного этому:

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

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

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

export default Component;

Как убрать это предупреждение, не удаляя массив зависимых реагирующих зацепок / исчерпывающий-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

Поздний ответ, но все голоса за первый ответ

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

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

Answer 3

Вы можете добавить 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;