react-hook-form 验证不适用于自定义字段数组

Question

我正在使用带有自定义动态输入字段数组的 react-hook-form，当我点击提交按钮时看起来验证正在工作，但它没有显示错误消息，我正在创建状态:

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>
      );
    })}

你可以查看demo

有什么帮助吗？

Answer 1

因为你在useState中形成了formFields。它只运行一次。表明它已经捕获了错误值，即第一个初始值。您需要使用 useEffect 来跟踪错误值的变化或将 item.error 的条件更改为直接错误。

react-hook-form 使用其错误进行验证，即在您的情况下它应该是

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

这是演示 link：https://codesandbox.io/s/blue-shape-pv8jf

react-hook-form 验证不适用于自定义字段数组

react-hook-form validation not working with custom fields array

javascript

reactjs

react-hook-form