fix: not crash if getValueProps return empty (#655)

react-component · Mar 5, 2024 · c4aa890 · c4aa890
1 parent 5bb7102
commit c4aa890
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/Field.tsx b/src/Field.tsx
@@ -59,8 +59,8 @@ export type MetaEvent = Meta & { destroy?: boolean };
 
 export interface InternalFieldProps<Values = any> {
   children?:
-  | React.ReactElement
-  | ((control: ChildProps, meta: Meta, form: FormInstance<Values>) => React.ReactNode);
+    | React.ReactElement
+    | ((control: ChildProps, meta: Meta, form: FormInstance<Values>) => React.ReactNode);
   /**
    * Set up `dependencies` field.
    * When dependencies field update and current field is touched,
@@ -581,10 +581,13 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     const valueProps = mergedGetValueProps(value);
 
     // warning when prop value is function
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== 'production' && valueProps) {
       Object.keys(valueProps).forEach(key => {
-        warning(typeof valueProps[key] !== 'function', `It's not recommended to generate dynamic function prop by \`getValueProps\`. Please pass it to child component directly (prop: ${key})`)
-      })
+        warning(
+          typeof valueProps[key] !== 'function',
+          `It's not recommended to generate dynamic function prop by \`getValueProps\`. Please pass it to child component directly (prop: ${key})`,
+        );
+      });
     }
 
     const control = {

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -395,10 +395,23 @@ describe('Form.Basic', () => {
       </div>,
     );
 
-    // expect((container.querySelector('.anything').props() as any).light).toEqual('bamboo');
     expect(container.querySelector('.anything')).toHaveAttribute('data-light', 'bamboo');
   });
 
+  it('getValueProps should not throw if return empty', async () => {
+    const { container } = render(
+      <div>
+        <Form initialValues={{ test: 'bamboo' }}>
+          <Field name="test" getValueProps={() => null}>
+            <span className="anything" />
+          </Field>
+        </Form>
+      </div>,
+    );
+
+    expect(container.querySelector('.anything')).toBeTruthy();
+  });
+
   describe('shouldUpdate', () => {
     it('work', async () => {
       let isAllTouched: boolean;