Реагировать на крючки - не рендерит с первого раза

Question

У меня есть пользовательский компонент TextField, который может отображаться при возникновении ошибки, например, при попытке отправки формы с пустым текстовым полем.В этом случае поле отображается как «красный» с соответствующим текстом ошибки.

Проблема, с которой я сталкиваюсь, заключается в том, что в настоящее время, когда я пытаюсь обработать эту логику из компонента Form, скажем, логин (я обрабатываю требуемое состояние с помощью useState(state, setState)), TextField имеет вид 'красный 'на первом рендере, потому что он пуст.Это должно произойти только тогда, когда пользователь что-то набрал и снова удалил, но не сразу после первого рендеринга, поскольку TextField в любом случае пуст.

Раньше я мог бы решить это с помощью ловушки жизненного цикла componentDidUpdate().Поэтому что-то вроде useEffect(...) следует использовать?Я не знаю, как это сделать.Есть идеи?

Answer 1

Это должно быть концептуальное решение, которое я искал для моей проблемы.

Здесь небольшое изображение, показывающее концепцию.Для получения дополнительной информации прочитайте ссылку внизу.

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

Answer 2

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

Tryэто в вашем компоненте

const [value, setValue] = useState(""); useEffect(() => setValue(initialValue), [initialValue]);

initialValue - это значение вашего компонента (передача реквизита дочернему компоненту, например, в поле ввода)

Полный код здесь