Почему react-hook-form не показывает ошибки, полученные от zod, в некоторых ситуациях?

Question

FrostbiteShadow

javascript , react

Почему react-hook-form не показывает ошибки, полученные от zod, в некоторых ситуациях?

Привет всем! У меня возникла проблема с формой, содержащей N полей, некоторые из которых являются опциональными. Когда значение определенного поля, назовем его X, равно true, то должны отображаться два дополнительных обязательных поля. Однако, если X равно false, эти поля не должны быть обязательными. Ситуация в том, что когда я устанавливаю X в true до заполнения обязательных полей, они не подсвечиваются как обязательные. Если же заполнить их первым делом, то подсветка работает корректно. Это выглядит как баг. Кто-нибудь сталкивался с подобной проблемой? Вот кусочек кода, который я использую, в частности, с функцией superRefine: <br/><br/><pre><code class="javascript">.superRefine((values, ctx) =&gt; {
    if (!!values.isAdmin &amp;&amp; !values.roles?.length) {
      ctx.addIssue({
        code: z.ZodIssueCode.custom,
        message: 'Обязательно',
        path: ['roles'],
      });
    }
  });</code></pre>

22 ноября 2024 г. 8:23

Ответы на вопрос 1

Похожие вопросы

Answer 1

Данная проблема, с которой вы столкнулись, может быть связана с тем, как `react-hook-form` и `zod` обрабатывают изменения в состоянии вашей формы и валидацию полей.

При использовании `superRefine` в `zod` вы, вероятно, задаете дополнительные обязательные поля на основе состояния других полей. Однако важно помнить, что при изменении состояния (например, изменения значения `X` на `true` или `false`) валидация не срабатывает автоматически для полей, которые зависят от этого состояния, если вы не вызовете перерисовку и повторную валидацию.

Вот несколько рекомендаций о том, как это можно исправить:

1. **Используйте `trigger` для повторной валидации**: После изменения значения `X`, выполните вызов функции `trigger`, чтобы принудительно вызвать повторную валидацию всей формы или определенных полей. Это может помочь обновить сообщение об ошибках для зависимых полей.

   ```javascript
   const onXChange = (newValue) => {
     setValue('isAdmin', newValue);
     trigger(['roles']); // здесь вы вызываете валидацию для roles
   };
   ```

2. **Заключение валидации в `useEffect`**: Вы можете использовать `useEffect`, чтобы отслеживать изменения в `X` и инициировать валидацию для зависимых полей:

   ```javascript
   useEffect(() => {
     if (watch('isAdmin')) {
       trigger(['roles']);
     }
   }, [watch('isAdmin')]);
   ```

3. **Убедитесь, что все поля правильно связаны**: Поскольку реактивные формы зависят от правильной связи между полями и их состояниями, проверьте, что поля, которые должны становиться обязательными или обязательными по условиям, правильно зарегистрированы и актуализированы в рамках формы.

4. **Логика валидации Zod**: Проверьте вашу логику валидации и убедитесь, что она настроена должным образом. Возможно, стоит включить дополнительную проверку на наличие состояния `isAdmin`, чтобы обеспечить корректную логику в зависимости от того, заполнено ли поле `roles`.

5. **Логирование и отладка**: Добавьте логи в логику валидации, чтобы видеть, когда и как обрабатываются данные, а также когда они проходят валидацию и когда срабатывают ошибки.

Если проблема не исчезнет после выполнения этих шагов, рекомендую создать минимальный воспроизводимый пример и предоставить его на соответствующих форумах или документации `react-hook-form` и `zod`, чтобы получить более специфичную помощь.