1

我正在使用带有自定义动态输入字段数组的 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>
      );
    })}

你可以查看演示

请问有什么帮助吗？

4

1 回答 1

2

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

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

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

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

于 2020-03-03T03:30:35.443 回答