在vue3 watch回调中，使用form的setValue、setFeedback等方法会报错

[hugo429586472]

版本
vue 3.1.5 或 3.0.10
formily 2.0.0-beta.81

代码
https://codesandbox.io/s/objective-sammet-l61op?file=/src/App.vue

操作
点击 设置校验 或者 设置值 按钮

问题
操作后会报错，提示 can't read property 'length' of null

期望
能正常在watch的回调中处理值与校验的方式（希望还是通过watch的回调来触发）
也希望能解答下出现这个情况的原因

[hugo429586472]

尝试过用nextTick将setFeedback setValues事件放渲染后处理，也还是有问题。
因为vue3 watch 回调中触发其他非formily方法的render是没有问题的，所以将提问放在了formily这边。

[MisicDemone]

可能是 @formily/reactive-vue 与 vue3 的响应体系结合产生的问题，待排查。这种情况可以考虑利用 @formily/reactive 提供的响应系统来替代，比如上面的例子可以改写为下面的代码，不过需要多写一个dispose：

<template>
  <FormProvider :form="form">
    <SchemaField :schema="schema"> </SchemaField>
    <FormConsumer>
      <template #default="{ form }">
        {{ form.pattern }}
        <div style="white-space: pre; margin-bottom: 16px">
          {{ JSON.stringify(form.values, null, 2) }}
        </div>
      </template>
    </FormConsumer>

    <button @click="tryTest">设置校验</button>
    <button @click="tryTest2">设置值</button>
    <!-- <button @click="submitPattern">保存</button> -->
  </FormProvider>
</template>

<script>
import {
  Form,
  DatePicker,
  Upload as AUpload,
  Select,
  Cascader,
  Input as AInput,
} from "ant-design-vue";
import { createForm } from "@formily/core";
import { observable, Tracker } from "@formily/reactive";
import {
  FormProvider,
  FormConsumer,
  createSchemaField,
  connect,
  mapProps,
  mapReadPretty,
} from "@formily/vue";
import "ant-design-vue/dist/antd.css";
import { onUnmounted } from 'vue';

const FormItem = connect(
  Form.Item,
  mapProps(
    {
      title: "label",
      description: "extra",
      required: true,
      validateStatus: true,
    },
    (props) => {
      return {
        ...props,
        // help: field.errors?.length ? field.errors : undefined,
      };
    }
  )
);

const Upload = connect(
  AUpload,
  mapProps(function () {
    return {
      onChange: function () {
        return [];
      },
    };
  })
);

const Input = connect(
  AInput,
  mapReadPretty((props) => <div>{props.value}</div>)
);

const { SchemaField } = createSchemaField({
  components: {
    FormItem,
    DatePicker,
    Upload,
    Select,
    Cascader,
    Input,
  },
});

let schema = {
  type: "object",
  properties: {
    input: {
      type: "string",
      title: "文本",
      "x-component": "Input",
      "x-decorator": "FormItem",
    },
  },
};

export default {
  components: { FormProvider, FormConsumer, SchemaField },
  setup () {
    const form = createForm({
      pattern: "editable",
    })
    const setFeedBack = () => {
      form.query("input").forEach((field) => {
        field.setFeedback({
          code: "ValidateError",
          messages: ["该字段不能重复"],
          triggerType: "onInput",
          type: "error",
        });
      });
    }
    const setValue = () => {
      form.setValues({ input: "test2" }, "overwrite");
    }
    const obs = observable({
      test: false,
      test2: false,
    })
    const tryTest = () => {
      obs.test = true;
    }
    const tryTest2 = () => {
      obs.test2 = true;
    }
    const tracker = new Tracker(() => setFeedBack())
    tracker.track(() => obs.test)
    const tracker2 = new Tracker(() => setValue())
    tracker2.track(() => obs.test2)
    onUnmounted(() => {
      tracker.dispose()
      tracker2.dispose()
    })

    return {
      form,
      schema,
      tryTest,
      tryTest2
    };
  },
  methods: {
    submitPattern() {
      this.form.submit((res) => {
        console.log(res);
        alert("提交成功");
      });
    },
  }
};
</script>

[hugo429586472]

好的，我尝试一下，感谢解答

[hugo429586472]

当前组件里的参数（data）改为使用formily提供的响应式 observable, Tracker 是可以的
不过对于props里的参数要怎么处理？想监控props的变换进行setFeedback setValues（因为这里是二次封装的表单组件）
尝试了用observable 去绑定 props的参数，似乎是不行的，Tracker好像也是只对observable对象生效

[MisicDemone]

当前组件里的参数（data）改为使用formily提供的响应式 observable, Tracker 是可以的
不过对于props里的参数要怎么处理？想监控props的变换进行setFeedback setValues（因为这里是二次封装的表单组件）
尝试了用observable 去绑定 props的参数，似乎是不行的，Tracker好像也是只对observable对象生效

const xxx = toRef(props, 'xxx');
const obs = observable({ xxx: '' })
watch(xxx, v => obs.xxx = v)

[MisicDemone]

两种响应体系混写还是很蛋疼的，所以推荐这些逻辑尽量用 form effects 来写

[hugo429586472]

两种响应体系混写还是很蛋疼的，所以推荐这些逻辑尽量用 form effects 来写

嗯，我这边尝试下用 form effects 来写吧
前面toRef watch的方式还是不行的，本质还是在 watch回调中执行了formily的方法，我这尝试了还是会报同样的错误。这里毕竟是两个响应体系的混合，解决的话应该还是只使用其中一种比较好。