Modal中的Form异步赋值问题

[daiikaku]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

No response

Semi Version

2.76.1

Current Behavior

无法获得form或者formApi

Expected Behavior

获得form或者formApi，并正确赋值

Steps To Reproduce

1、异步获取数据后设置Modal显示，然后给form赋值
2、react16可以正确赋值，但是react18无法获得form或者formApi。

希望能够知道如何在react18下给modal中的form异步赋值。

ReproducibleCode

import { useState, forwardRef, useImperativeHandle, useRef } from 'react';
import { Button, Form, Modal } from '@douyinfe/semi-ui';

const EditModal = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const form1 = useRef<Form>(null);

  useImperativeHandle(ref, () => ({
    open: () => {
      setTimeout(() => {
        setVisible(true);

        alert(form1.current == null);
        form1.current.formApi.setValues({ name: '123' });
      }, 2000);
    },
  }));

  return (
    <Modal visible={visible} onCancel={() => setVisible(false)}>
      <Form ref={form1}>
        <Form.Input label="名称" field="name" />
      </Form>
    </Modal>
  );
});

export default () => {
  const modal1 = useRef(null);
  return (
    <div>
      <EditModal ref={modal1} />

      <Button
        onClick={() => {
          modal1.current.open();
        }}
      >
        编辑
      </Button>
    </div>
  );
};

react 16:
https://stackblitz.com/edit/xzsmd7-jhyimlws?file=src%2FApp.tsx,src%2Fmain.tsx,package.json

react 18
https://stackblitz.com/edit/xzsmd7-r5k8nank?file=src%2Fmain.tsx,src%2FApp.tsx

Environment

- OS:
- browser:

Anything else?

No response

[SudoUserReal]

已知问题，react18 的状态更新顺序有在 react changlog 外的变更。另外你这里的代码应该有一个闭包问题。

在 react18 下试试这个

import { useState, forwardRef, useImperativeHandle, useRef } from 'react';
import { Button, Form, Modal, Skeleton, Toast, Spin } from '@douyinfe/semi-ui';

const EditModal = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const form1 = useRef<any>({ f: null });

  useImperativeHandle(ref, () => ({
    open: () => {
      setVisible(true);
      setLoading(true);

      setTimeout(() => {
        form1.current.f.formApi.setValues({ name: '123' });
        setLoading(!loading);

        // Toast.warning('没有找到记录');
        // setVisible(false);
        // setLoading(false);
      }, 2000);
    },
  }));

  return (
    <Modal
      title={`用户${loading}`}
      visible={visible}
      onCancel={() => setVisible(false)}
    >
      <Skeleton
        loading={loading}
        placeholder={
          <div
            style={{ display: 'flex', alignItems: 'flex-start', gap: '5px' }}
          >
            <div>
              <Skeleton.Paragraph style={{ width: 60 }} rows={3} />
            </div>
            <div>
              <Skeleton.Paragraph style={{ width: 200 }} rows={3} />
            </div>
          </div>
        }
      >
        {loading}
      </Skeleton>
      <Form ref={(f) => (form1.current.f = f)}>
        <Form.Input label="名称" field="name" />
      </Form>
    </Modal>
  );
});

export default () => {
  const modal1 = useRef(null);
  return (
    <div>
      <EditModal ref={modal1} />

      <Button
        onClick={() => {
          modal1.current.open();
        }}
      >
        编辑
      </Button>
    </div>
  );
};