fix(FormItem): 修复initialValue属性初始化未被正确加入到Formstore中导致的问题 (#2247)

Miles-hxy · eiinu · web-flow · commit 23e64e0cb719 · 2024-05-24T14:55:32.000+08:00
* fix(FormItem): 修复initialValue属性初始化未被正确加入到Formstore中导致的问题

* fix: formItem与form初始值同时设置情况下的处理

* chore: delete test code

* chore: form增加测试用例覆盖

* fix: pr

* chore: delete useless

* fix: add unit test &amp;&amp; submit bug

---------

Co-authored-by: Eiinu &lt;eiinu@qq.com&gt;
diff --git a/src/packages/form/__tests__/form.spec.tsx b/src/packages/form/__tests__/form.spec.tsx
@@ -22,6 +22,62 @@ test('form set initialValues', () => {
   )
 })
 
+test('formItem set initialValue', () => {
+  const { container } = render(
+    <Form>
+      <Form.Item name="username" initialValue="NutUI-React">
+        <Input />
+      </Form.Item>
+    </Form>
+  )
+  expect(container.querySelector('.nut-input-native')).toHaveValue(
+    'NutUI-React'
+  )
+})
+
+test('Both form and formItem set initialValue(s)', () => {
+  const { container } = render(
+    <Form initialValues={{ username: 'NutUI-React-Form' }}>
+      <Form.Item name="username" initialValue="NutUI-React-FormItem">
+        <Input />
+      </Form.Item>
+    </Form>
+  )
+  expect(container.querySelector('.nut-input-native')).toHaveValue(
+    'NutUI-React-Form'
+  )
+})
+test('Both form and formItem set initialValue(s) to submit', async () => {
+  const handleSubmit = vi.fn()
+  const { container } = render(
+    <Form
+      initialValues={{ username: 'NutUI-React-Form', age: 18 }}
+      onFinish={handleSubmit}
+    >
+      <Form.Item name="username" label="UserName" initialValue="NutUI-React">
+        <Input />
+      </Form.Item>
+      <Form.Item name="age" label="Age" initialValue="30">
+        <Input />
+      </Form.Item>
+      <Form.Item name="phone" label="Phone" initialValue="123456">
+        <Input />
+      </Form.Item>
+    </Form>
+  )
+  const form = container.querySelector('form') as Element
+  fireEvent.submit(form)
+  await waitFor(() => {
+    expect(handleSubmit).toBeCalled()
+    expect(handleSubmit).toBeCalledWith(
+      expect.objectContaining({
+        username: 'NutUI-React-Form',
+        age: 18,
+        phone: '123456',
+      })
+    )
+  })
+})
 test('form validateTrigger', async () => {
   const { container, rerender } = render(
     <Form>
diff --git a/src/packages/formitem/formitem.taro.tsx b/src/packages/formitem/formitem.taro.tsx
@@ -73,6 +73,18 @@ export class FormItem extends React.Component<
   }
 
   componentDidMount() {
+    // Form设置initialValues时的处理
+    const { store = {}, setInitialValues } = this.context.getInternal(SECRET)
+    if (
+      this.props.initialValue &&
+      this.props.name &&
+      !Object.keys(store).includes(this.props.name)
+    ) {
+      setInitialValues(
+        { ...store, [this.props.name]: this.props.initialValue },
+        true
+      )
+    }
     // 注册组件实例到FormStore
     const { registerField, registerUpdate } = this.context.getInternal(SECRET)
     this.cancelRegister = registerField(this)
@@ -98,6 +110,7 @@ export class FormItem extends React.Component<
     if (children?.props?.defaultValue) {
       console.warn('通过 initialValue 设置初始值')
     }
+
     const fieldValue = getFieldValue(name)
     const controlled = {
       ...children.props,
diff --git a/src/packages/formitem/formitem.tsx b/src/packages/formitem/formitem.tsx
@@ -73,6 +73,18 @@ export class FormItem extends React.Component<
   }
 
   componentDidMount() {
+    // Form设置initialValues时的处理
+    const { store = {}, setInitialValues } = this.context.getInternal(SECRET)
+    if (
+      this.props.initialValue &&
+      this.props.name &&
+      !Object.keys(store).includes(this.props.name)
+    ) {
+      setInitialValues(
+        { ...store, [this.props.name]: this.props.initialValue },
+        true
+      )
+    }
     // 注册组件实例到FormStore
     const { registerField, registerUpdate } = this.context.getInternal(SECRET)
     this.cancelRegister = registerField(this)
