Проблема с пользовательской проверкой реакции-хука-формы

Я пытаюсь проверить ввод после запроса API. Похоже, значение hasErrors не обновляется внутри функции проверки. Только после повторного рендеринга он получает значение.

И да, я пробовал много вещей, например useCallback, настройку состояния для принудительного повторного рендеринга.

Возможно, вы сможете обнаружить проблему

https://stackblitz.com/edit/vitejs-vite-hj9vsw?file=src%2FApp.tsx

Я попробовал сделать то же самое с formik и swr, и у меня получилось.

https://stackblitz.com/edit/vitejs-vite-2ccgg9?file=src%2FApp.tsx

Наконец-то теперь это работает — отдельное спасибо ИИ за идеи.

https://stackblitz.com/edit/vitejs-vite-dzd5wd?file=src%2FApp.tsx

Простите, ИИ ответил на ваш вопрос? Если нет, то можно поточнее, в чем проблема?

Scott Z 09.05.2024 03:21

Ваш первый пример не удался, потому что все состояния ошибок, возвращаемые из useQuery, имеют состояние и асинхронны, но ваша функция проверки синхронно вызывает refetch, а затем немедленно пытается прочитать эти значения ошибок.

Scott Z 09.05.2024 03:35

AI просто хак, {...register('example', { validate: async (value) => await validate(value) })} если я дождусь повторной загрузки, все равно не получится

FDisk 09.05.2024 08:20

Таким образом, причина, по которой простое ожидание повторной загрузки не работает, заключается в том, что эти значения ошибок являются как асинхронными, так и с сохранением состояния. Когда состояние обновляется, новое значение доступно только при следующем рендеринге. Но вы пытаетесь прочитать обновления состояния в середине вызова функции. Пока эта функция работает, она не может читать обновления состояния.

Scott Z 09.05.2024 15:01

Вы можете сделать это const result = await refetch(), а затем прочитать свойства result. Результат является асинхронным, но не с сохранением состояния.

Scott Z 09.05.2024 15:02

Откройте демо-версию и добавьте ожидание - затем во входных данных добавьте число в имя домена, чтобы оно стало недействительным - и это все равно не покажет, что введенные данные недействительны.

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

Ответы 2

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

Значит проблема была в другом месте. Убедитесь, что ваши пользовательские перехватчики правильно возвращают значения. Если вы извлекаете их перед возвратом, они теряют след изменений.

https://stackblitz.com/edit/vitejs-vite-gpdnjb?file=src%2FApp.tsx

Вот решение, использующее асинхронное ожидание в методе проверки. ждём повторной загрузки. Вы можете вызвать эту ошибку, передав идентификатор 0. Это небольшая поправка к вашему первому примеру.

const validate = async (value: string) => {
    if (value.length > 3) {
      const result = await refetch();

      console.info({ result });
      if (!result.data.id) {
        return 'Error no such todo';
      }

      return true;
    }

    return false;
  };

Вот рабочий пример: https://stackblitz.com/edit/vitejs-vite-foxtb6?file=src%2FApp.tsx

Проблема, с которой вы столкнулись, заключается в том, что вы пытаетесь выполнить повторную выборку, а затем прочитать обновление состояния внутри вызова функции.

Это та же проблема, с которой сталкиваются многие люди в React, когда они обновляют состояние в функции, а затем сразу же пытаются прочитать это состояние и обнаруживают, что оно еще не обновилось. Изменения состояния не отображаются до следующего рендеринга. Вы не можете установить состояние в функции, а затем сразу ожидать, что сможете прочитать это обновленное состояние в том же вызове функции. Вот что происходит, когда вы вызываете refetch в методе проверки. Когда повторная выборка разрешается, обновляется состояние, возвращаемое из useQuery, и вы пытаетесь прочитать эти обновления состояния в той же функции, которая вызывала refetch.

В моем примере, ожидая refetch, мы получаем значения непосредственно из результата refetch. Этот результат не сохраняет состояние и может быть прочитан немедленно.

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