在我的项目中，我有一个用来添加学校详细信息的表单。在该表单中，我有一个ID字段，当输入长度= 5时，无论给定的ID是否存在，都需要在onChange中使用后端进行验证。

antd版本4.18.2

字段验证通过Form.item中的rules属性处理。
我使用validator函数来处理这个自定义验证。
状态值

const [idStatus, setIdStatus] = useState(false); // this value is get by API call.
  const [validateStatus, setValidateStatus] = useState("");

表单ID字段

<Form form={form} name="form" onFinish={onFinish}>
    <Row className="applicationFormContent">
      <Col span={8}>
        <Form.Item
          name="schoolId"
          label="School Id"
          validateStatus={validateStatus}
          rules={[
            {
              required: true,
              message: "Please Provide School ID!"
            },
            {
              len: 5,
              message: "School ID must have 5 digits"
            },
            {
              validator: validateId // validator is a function used for custom validation.
            }
          ]}
        >
          <Input
            type={"number"}
            maxLength={5}
            placeholder="Id - 00000 format"
            onChange={(e) => checkSchoolId(e.target.value)}
          />
        </Form.Item>
      </Col>
    </Row>
  </Form>

onChange中触发的函数

const checkSchoolId = async (value) => {
try {
  if (value.length === 5) {
    let response = await checkId(value);
    console.log("-----", response.response?.data?.idExists);
    setIdStatus(response.response?.data?.idExists);
  } else {
    setValidateStatus("error");
  }
} catch (err) {
  console.log(err);
}
};

规则中使用的验证程序函数

const validateId = (rule, value) => {
if (idStatus) {
  // value return from API call.
  setValidateStatus("error");
  return Promise.reject("Census Id Already Exist");
} else {
  setValidateStatus("success");
  return Promise.resolve();
}
};

问题：

当输入长度= 5时，我从后端获取值并更新状态。但是验证器函数不会被更新触发。这意味着当更新状态变量时，表单输入不会被重新呈现。我记录了值，更新后的值显示为原样。
但是当我再输入一个数字（input-lenght=6），显示两个验证，然后删除一个字符（现在input-length=5），它显示从后端值获得的验证。
如何解决呢？
example code sandbox