Strange Behaviour when setting error in reactions and validator

[DanielNguyen2512]

Issue

Apology that I don't know Chinese so it's hard to search related issue, may need your help to check this issue. Really appreciate it 🙏

Recently I encountered a case that needs your help to check

1. I created 2 different reactions that check the value and then call setSelfError

• shouldNotIncludeXReaction
• shouldNotIncludeYReaction
  The 2 reactions conflict to each other, because the reactions will override the selfError, so I write a util removeErrorMsg to only filter the error (can check the code below)

2. When there is a validator, it has a strange behavior is to keep duplicate the error from validator (can check the video below)

Screen.Recording.2023-12-12.at.4.18.58.PM.mov

Expected

The field should not duplicate the error from validator

How to reproduce

I tried to use the demo code in codesandbox, but somehow, when I installed the @formily/antd package, the codesandbox kept bundling forever... So I leave a simple code below, you can reproduce it easily

import React from "react";
import { createForm, Field as FieldType } from "@formily/core";
import { FormProvider, Field } from "@formily/react";
import { FormItem } from "@formily/antd";
import { Input } from "antd";

const form = createForm();

const removeErrorMsg = (field: FieldType, errMsg: string): void => {
  field.setSelfErrors(
    field.selfErrors.filter((_errMsg) => {
      if (typeof _errMsg === "string" && errMsg === _errMsg) {
        return false;
      }
      return true;
    })
  );
};

const shouldNotIncludeXReaction = (field): void => {
  const value = field.value as string;
  if (value?.includes("x")) {
    field.setSelfErrors(["Should not include x"]);
  } else {
    removeErrorMsg(field, "Should not include x");
  }
}

const shouldNotIncludeYReaction = (field): void => {
  const value = field.value as string;

  if (value?.includes("y")) {
    field.setSelfErrors(["Should not include y"]);
  } else {
    removeErrorMsg(field, "Should not include y");
  }
}

export default () => (
  <FormProvider form={form}>
    <Field
      name="input"
      validator={{ required: true }}
      decorator={[FormItem, { label: "Test Field" }]}
      component={[Input, { placeholder: "Please Input" }]}
      reactions={[
        shouldNotIncludeXReaction,
        shouldNotIncludeYReaction
      ]}
    />
  </FormProvider>
);