Ant Design Form调用getFieldsError总是返回空错误数组问题求助

问题根因 #

Ant Design Form 的字段校验逻辑是异步执行的，你在调用form.setFieldsValue之后同步调用getFieldsError时，校验流程还未完成，错误状态尚未更新，因此返回空数组。
另外你给Input组件手动绑定value和onChange属于冗余操作：Form.Item默认会对包裹的表单控件做值的双向绑定，额外手动控制值容易引发状态不一致问题。

修复方案 #

方案1：异步获取校验结果 #

如果需要在值变更后立刻获取最新校验错误，调用异步的validateFields方法等待校验完成后再读取错误：

<Input
  placeholder="Item name"
  onChange={async (event: ChangeEvent<HTMLInputElement>) => {
    form.setFieldsValue({ name: event.target.value });
    try {
      await form.validateFields(['name']);
      // 校验通过的处理逻辑
    } catch {
      // 校验完成后再调用getFieldsError就能拿到最新错误
      console.log(form.getFieldsError());
    }
  }}
/>

方案2：简化值绑定逻辑 #

删除Input上手动绑定的value和自定义onChange，直接交给Form托管值状态：

<Form.Item
  name="name"
  rules={[
    { required: true, message: 'A name is required!' },
    () => ({
      validator(_, value) {
        if (!!items.find((item: Item) => item.name === value)) {
          return Promise.reject(new Error('The name must be unique!'));
        }
        return Promise.resolve();
      },
    }),
  ]}
  initialValue={itemForm.item.name}
>
  <Input placeholder="Item name" />
</Form.Item>

后续需要获取错误时，在表单提交前等校验已经触发完成的时机调用getFieldsError即可正常拿到结果。

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