Javascript react钩子窗体验证不使用自定义字段数组

我正在使用带有自定义动态输入字段数组的react hook表单，当我单击submit按钮时，验证似乎正在工作，但它没有显示错误消息，我正在创建状态为：

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

{formFields.map（（项，索引）=>{
返回(
{item.error&&输入有效值}
);
})}

你可以查一下

---

有什么帮助吗？

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

react hook表单

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

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

{errors[item.name]&&输入有效值}

以下是演示链接：