В React Hook useEffect отсутствует зависимость: «История»

У меня есть этот код:

import {useContext, useEffect, useState} from 'react';
import {useHistory} from "react-router-dom";
import {MasterContext} from "../../Context/MasterProvider";
import LoginActions from "../../Context/Actions/LoginActions";

const useLoginForm = () => {
    const History = useHistory();
    const [login, setLogin] = useState({});
    const {AuthState: {Authentication: {Loading, Data, Error}}, AuthDispatch}=useContext(MasterContext);
    const FormData = (event) => {
        const { target: { value, name } } = event;
        setLogin({...login, [name]: value});
    };

    const FormValid =
        !login.email?.length ||
        !login.password?.length;

    const FormSubmit = () => {
        LoginActions(login)(AuthDispatch);
    }

    useEffect(() => {
        if (Data) {
            if (Data.user) {
                History.push("/");
            }
        }
    }, [Data])

        return {login, FormData, FormValid, FormSubmit, Loading, Error, Data};
    }

export default useLoginForm;

Работает нормально, но с предупреждениями. «React Hook useEffect имеет отсутствующую зависимость:« История ». Либо включите ее, либо удалите массив зависимостей react-hooks/exhaustive-deps»

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
2 649
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить историю в качестве зависимости, история не изменится, если маршрут не будет изменен. Таким образом, ваш хук useEffect не будет работать, если данные или история не будут изменены.

  useEffect(() => {
        if (Data && Data.user) {
                History.push("/");
        }
    }, [Data, History])

Как мне это сделать

Ramy Mohamed 19.12.2020 11:53

добавить историю в массив зависимостей.

wadecodes 19.12.2020 11:54

с «Данные» [Данные, История]

Ramy Mohamed 19.12.2020 11:56

Разве History.push("/") не меняет историю?

K.Nicholas 21.04.2021 18:22

Другие вопросы по теме