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

Question

Я использую реагирующую форму с настраиваемым динамическим c массивом полей ввода, похоже, что проверка работает, когда я нажимаю кнопку отправки, но не показывает сообщения об ошибках, я создаю состояние как:

const [formFields, setFormFields] = useState([
{
  height: 45,
  label: "tv",
  placeholder: "555",
  name: "tv",
  maxWidth: 203,
  error: errors.tv,
  value: ""
},
{
  height: 45,
  label: "radio",
  placeholder: "90%",
  name: "radio",
  maxWidth: 126,
  error: errors.radio,
  value: ""
},
{
  height: 45,
  label: "instagram",
  placeholder: "90%",
  name: "instagram",
  maxWidth: 126,
  error: errors.instagram,
  value: ""
}

]);

и создавая ввод как:

{formFields.map((item, index) => {
      return (
        <div key={index}>
          <TextInput
            name={item.name}
            label={item.label}
            height={item.height}
            placeholder={item.placeholder}
            error={item.error}
            value={item.value}
            inputRef={register({
              required: true
            })}
            onChange={fieldOnChange(index)}
          />
          {item.error && <span>Enter a valide value</span>}
        </div>
      );
    })}

вы можете проверить демо

любая помощь, пожалуйста?

Answer 1

Это потому что вы формируете поля в useState. Работает только один раз. Показать это уже фиксирует значение ошибки, т.е. первое первоначальное значение. Вам нужно либо использовать useEffect для отслеживания изменения значения ошибки, либо изменить условие item.error на прямые ошибки.

react-hook-form использует свои ошибки для проверки, т.е. в вашем случае это должно быть

{errors[item.name] && <span>Enter a valid value</span>}

Вот демонстрационная ссылка: https://codesandbox.io/s/blue-shape-pv8jf