alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://formilyjs.org/
MIT License
11.26k stars 1.46k forks source link

[Bug Report] SchemaField.String组件配合Observer组件无法实现响应式渲染 #3904

Closed moushicheng closed 1 year ago

moushicheng commented 1 year ago

Reproduction link

Edit on CodeSandbox

Steps to reproduce

等待一段时间,看显示结果

What is expected?

我希望1s之后,SchemaField.String内部渲染的input组件,value从init -> next

What is actually happening?

SchemaField.String内部渲染的input组件,组件不变化

Package

@formily/react@2.2.27


yiyunwan commented 1 year ago

https://codesandbox.io/s/ancient-dream-rzmm66 你用错了

moushicheng commented 1 year ago

https://codesandbox.io/s/ancient-dream-rzmm66 你用错了

@yiyunwan 我知道可以用scope,用scope的话不用observer组件也是可以的,像这样 https://codesandbox.io/s/confident-banach-zfvfjk

export default () => {
  setTimeout(() => {
    dataSource.value = "next";
  }, 1000);
  return (
    <FormProvider form={form}>
            <SchemaField>
              <SchemaField.String
                name="input"
                x-component="Input"
                x-value="{{dataSource.value}}"
              />
            </SchemaField>
    </FormProvider>
  );
};

但我理解Observer下的响应式变量更新时,会再次渲染它底下的函数组件,这里SchemaField.String这种case不会更新是为什么呢?

yiyunwan commented 1 year ago

SchemaField在初次加载会初始化字段模型,仅在第一次生效,后续并不会再对字段模型重新赋值了,状态管理移交至字段模型内部,本质跟schema没区别的,这点跟常规组件理解不太一样