react-hook-form v7 ErrorMessage组件样式异常及重复显示问题求助

问题1：错误信息重复出现 #

你的代码中对name字段同时声明了两个<ErrorMessage>组件：

• 第一个使用as="p"属性渲染错误
• 第二个使用render属性自定义渲染错误
  二者都会监听name字段的错误状态，触发错误时会同时渲染，自然出现重复内容。直接删除任意一个<ErrorMessage>组件即可解决。

问题2：无法复现官方示例的错误提示样式 #

有两个常见原因：

• 未正确安装引入@hookform/error-message依赖：ErrorMessage不是react-hook-form核心库内置组件，需要单独安装该依赖，并在头部引入：

import { ErrorMessage } from '@hookform/error-message';

• 未添加自定义错误样式：官方示例的错误样式是额外自定义的，你可以在组件上添加样式即可复现效果，示例修改后代码如下：

<form onSubmit={handleSubmit(onSubmit)} id="contactform">
  <input
    type="text"
    placeholder="Name"
    name="name"
    {...register("name", {
      required: "Name is Required",
      minLength: {
        value: 3,
        message: "Please enter your name"
      }
    })}
  />
  {/* 保留一个ErrorMessage即可，这里用render自定义样式举例 */}
  <ErrorMessage
    errors={errors}
    name="name"
    render={({ message }) => <p style={{color: '#dc2626', fontSize: '0.875rem', margin: '0.25rem 0 0 0'}}>{message}</p>}
  />
  <input
    type="tel"
    placeholder="Mobile Number"
    name="mobile"
    {/* 补充：该输入框目前没有绑定register，不会触发校验，如果需要校验手机号要加上register逻辑 */}
    {...register('mobile', { required: '手机号为必填项' })}
  />
</form>

内容的提问来源于stack exchange，提问作者hoseh