【formily】使用FormDialog.Portal会弹出多个弹窗

背景

使用FormDialog来创建弹窗。

MyModal.ts

import React from 'react'
import { FormDialog, FormItem, FormLayout, Input } from '@formily/antd'
import { createSchemaField } from '@formily/react'
import { Button } from 'antd'

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
  },
})

const schema = {
  type: 'object',
  properties: {
    aaa: {
      type: 'string',
      title: '输入框1',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    bbb: {
      type: 'string',
      title: '输入框2',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    ccc: {
      type: 'string',
      title: '输入框3',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
    ddd: {
      type: 'string',
      title: '输入框4',
      required: true,
      'x-decorator': 'FormItem',
      'x-component': 'Input',
    },
  },
}

export default () => {
  return (
    // -----> here
    <FormDialog.Portal>
      <Button
        onClick={() => {
          const dialog = FormDialog('弹窗表单', () => {
            return (
              <FormLayout labelCol={6} wrapperCol={10}>
                <SchemaField schema={schema} />
                <FormDialog.Footer>
                  <span
                    onClick={() => {
                      dialog.close()
                    }}
                    style={{ marginLeft: 4 }}
                  >
                    扩展文案
                  </span>
                  (点击关闭弹窗)
                </FormDialog.Footer>
              </FormLayout>
            )
          })
          dialog
            .forOpen((payload, next) => {
              setTimeout(() => {
                next({
                  initialValues: {
                    aaa: '123',
                  },
                })
              }, 1000)
            })
            .forConfirm((payload, next) => {
              setTimeout(() => {
                console.log(payload)
                next(payload)
              }, 1000)
            })
            .forCancel((payload, next) => {
              setTimeout(() => {
                console.log(payload)
                next(payload)
              }, 1000)
            })
            .open()
            .then(console.log)
        }}
      >
        点我打开表单
      </Button>
    </FormDialog.Portal>
  )
}

使用的地方：

items.map(item=><MyModal/>)

这里有一个循环遍历渲染，可能会导致在打开弹窗的时候，弹出多个。

解决方式

去掉<FormDialog.Portal>就不会存在这个问题了，但是具体原因还不是很清楚。