解决@formily/react表单下拉选项不更新的问题?

Question

使用@formily/react框架开发，发现一个问题。设置Formily表单中下拉选项不生效

import { SchemaField } from "@/components";
import { createForm } from "@formily/core";
import { FormProvider } from "@formily/react";
import { s8 } from "@kinte-topology/core";
import { Button } from "antd";
import React, { useMemo, useState } from "react";

export default function Test() {
  const [options, setOptions] = useState([
    { label: "章三", value: "zhangsan" },
  ]);
  const form = useMemo(() => createForm(), []);

  return (
    <div>
      <Button
        type="primary"
        onClick={() =>
          setOptions(
            options.concat({
              label: `选项_${options.length}`,
              value: s8(),
            })
          )
        }
      >
        添加选项
      </Button>
      <code style={{ display: "block", padding: 24 }}>
        {JSON.stringify(options)}
      </code>
      <FormProvider form={form}>
        <SchemaField>
          <SchemaField.String
            x-decorator="FormItem"
            x-component="Select"
            name="name"
            enum={options}
            title="名字"
          />
        </SchemaField>
      </FormProvider>
    </div>
  );
}

在这里的options 已经变动了，但就是不能触发Formily的重新渲染。

希望当options变动的时候，下拉选项能更新

Answer 1

我就很久没使用这个库了。你试试方案。
1：

import { SchemaField } from "@/components";
import { createForm } from "@formily/core";
import { FormProvider, observer } from "@formily/react";
import { observable } from "@formily/reactive";
import { s8 } from "@kinte-topology/core";
import { Button } from "antd";
import { useMemo, useState } from "react";

export const Test = observer(() => {
  const form = useMemo(() => createForm(), []);
  const fieldProps = useMemo(() =>
    observable({
      enum: [{ label: "章三", value: "zhangsan" }]
    }), [])

  return (
    <div>
      <Button
        type="primary"
        onClick={() =>
          fieldProps.enum = (
            fieldProps.enum.concat({
              label: `选项_${fieldProps.enum.length}`,
              value: s8(),
            })
          )
        }
      >
        添加选项
      </Button>
      <code style={{ display: "block", padding: 24 }}>
        {JSON.stringify(fieldProps.enum)}
      </code>
      <FormProvider form={form}>
        <SchemaField>
          <SchemaField.String
            x-decorator="FormItem"
            x-component="Select"
            name="name"
            enum={fieldProps.enum}
            title="名字"
          />
        </SchemaField>
      </FormProvider>
    </div>
  );
});

2. 利用

   const form = useMemo(() => createForm(), []);

   直接通过 form实例对象去设置字段的属性值 form.setFieldState

Answer 2

用这个API

form.setFieldState("name", (state) => {
                        console.log("state", state);
                        state.value = 10000;
                        state.setDataSource([{ label: "我是new", value: 1 }]);
                    })