Question

我正在使用带有自定义动态输入字段数组的react-hook-form，当我单击“提交”按钮时，验证工作正常，但是它不显示错误消息，我将状态创建为：< / p>

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中形成了Fields。它只运行一次。显示它已经捕获了错误值，即第一个初始值。您需要使用useEffect来跟踪错误值的更改，或者将item.error的条件更改为直接错误。

/api/a/<remaining path>使用其错误进行验证，即您应该使用

react-hook-form

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

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

1 个答案: