Блог

Главная - Вопросы по программированию - У React Hook useEffect отсутствует зависимость ‘formdata’

У React Hook useEffect отсутствует зависимость ‘formdata’

#reactjs #react-hooks #use-effect #use-state

#reactjs #реагирующие крючки #использование-эффект #use-state

Вопрос:

В моей форме постоянно появляется предупреждение об отсутствии зависимости,
я попытался ввести formdata в массив useEffect, но если я введу formdata, он покажет превышение максимальной глубины обновления

Полное предупреждение: «У React Hook useEffect отсутствует зависимость: ‘formdata’. Либо включите его, либо удалите массив зависимостей»
, и мой код:

 const [isRevealPassword, isRevealPasswordHandler] = useState(false);

const [formdata, formdataHandling] = useState({
    email: {
        value: '',
        config: {
            type: 'email'
        }
    },
    password: {
        value: '',
        config: {
            type: 'password'
        }
    }
});

useEffect(() => {
    const newFormdata = {
        ...formdata
    }
    const newElement = {
        ...newFormdata['password']
    }

    newElement.config.type = isRevealPassword ? 'text' : 'password';
    newFormdata['password'] = newElement;
    formdataHandling(newFormdata);
}, [isRevealPassword]) // <--- if I input formdata here, it will looping until Maximum update depth exceeded

const togglePassword = () => {
        isRevealPasswordHandler(!isRevealPassword);
    }



return (
    <span
        onClick={() => togglePassword()}
    >
        {
            isRevealPassword ? <FaEye /> : <FaEyeSlash />
        }
    </span>
)

ответ находится в комментарии ниже, все кредиты принадлежат мистеру @Yousaf (удалит это сообщение здесь, если сам мистер Юсаф опубликует ответ)

Комментарии:

1. Вы могли бы использовать функциональную форму функции обновления состояния, возвращаемой useState хуком, чтобы избавиться от formData зависимости от useEffect хука: formdataHandling(prevFormData => { ... }) ;

2. спасибо за ваш ответ @Yousaf, я все еще не понимаю, куда мне поместить formdataHandling(prevFormData => { … }), должен ли я поместить его в эффект использования? или мне больше не нужен useeffect? извините, что не понимаю.

3. вы имеете в виду следующее: useEffect(() => { formdataHandling(prevFormData => { const newFormdata = { … prevFormData } const newElement = { …newFormdata[‘пароль’] } … }) }, [isRevealPassword]) если да, отображается ошибка «formdata не определена»

4. оке, пожалуйста, подождите минуту

5. @Yousaf могу ли я поделиться ссылкой здесь?

Метки: