feat: use PrefixContext to set prefixName instead of using FieldContext

src/Field.tsx

@@ -26,6 +26,7 @@ import {
   getNamePath,
   getValue,
 } from './utils/valueUtil';
+import PrefixContext from './PrefixContext';
 
 const EMPTY_ERRORS: any[] = [];
 
@@ -88,6 +89,8 @@ export interface InternalFieldProps<Values = any> {
   /** @private Pass context as prop instead of context api
    *  since class component can not get context in constructor */
   fieldContext?: InternalFormInstance;
+
+  prefixName?: InternalNamePath;
 }
 
 export interface FieldProps<Values = any>
@@ -151,6 +154,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
       initEntityValue(this);
     }
   }
+  props: { name?: NamePath; rules?: Rule[]; dependencies?: NamePath[]; initialValue?: any; };
 
   public componentDidMount() {
     const { shouldUpdate, fieldContext } = this.props;
@@ -187,8 +191,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
   // ================================== Utils ==================================
   public getNamePath = (): InternalNamePath => {
-    const { name, fieldContext } = this.props;
-    const { prefixName = [] }: InternalFormInstance = fieldContext;
+    const { name, prefixName = [] } = this.props;
 
     return name !== undefined ? [...prefixName, ...name] : [];
   };
@@ -624,6 +627,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
 function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>) {
   const fieldContext = React.useContext(FieldContext);
+  const prefixName = React.useContext(PrefixContext);
 
   const namePath = name !== undefined ? getNamePath(name) : undefined;
 
@@ -643,7 +647,7 @@ function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>)
     warning(false, '`preserve` should not apply on Form.List fields.');
   }
 
-  return <Field key={key} name={namePath} {...restProps} fieldContext={fieldContext} />;
+  return <Field key={key} name={namePath} {...restProps} fieldContext={fieldContext} prefixName={prefixName} />;
 }
 
 export default WrapperField;

src/List.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import warning from 'rc-util/lib/warning';
 import type { InternalNamePath, NamePath, StoreValue, ValidatorRule, Meta } from './interface';
 import FieldContext from './FieldContext';
+import PrefixContext from './PrefixContext';
 import Field from './Field';
 import { move, getNamePath } from './utils/valueUtil';
 import type { ListContextProps } from './ListContext';
@@ -45,12 +46,11 @@ const List: React.FunctionComponent<ListProps> = ({
   });
   const keyManager = keyRef.current;
 
+  const prefixNameContext = React.useContext(PrefixContext);
   const prefixName: InternalNamePath = React.useMemo(() => {
-    const parentPrefixName = getNamePath(context.prefixName) || [];
+    const parentPrefixName = getNamePath(prefixNameContext) || [];
     return [...parentPrefixName, ...getNamePath(name)];
-  }, [context.prefixName, name]);
-
-  const fieldContext = React.useMemo(() => ({ ...context, prefixName }), [context, prefixName]);
+  }, [prefixNameContext, name]);
 
   // List context
   const listContext = React.useMemo<ListContextProps>(
@@ -79,7 +79,7 @@ const List: React.FunctionComponent<ListProps> = ({
 
   return (
     <ListContext.Provider value={listContext}>
-      <FieldContext.Provider value={fieldContext}>
+      <PrefixContext.Provider value={prefixName}>
         <Field
           name={[]}
           shouldUpdate={shouldUpdate}
@@ -188,7 +188,7 @@ const List: React.FunctionComponent<ListProps> = ({
             );
           }}
         </Field>
-      </FieldContext.Provider>
+      </PrefixContext.Provider>
     </ListContext.Provider>
   );
 };

src/PrefixContext.ts

@@ -0,0 +1,7 @@
+
+import * as React from 'react';
+import { InternalNamePath } from './interface';
+
+const Context = React.createContext<InternalNamePath>([]);
+
+export default Context;

src/index.tsx

@@ -7,6 +7,7 @@ import type { FormProps } from './Form';
 import FieldForm from './Form';
 import { FormProvider } from './FormContext';
 import FieldContext from './FieldContext';
+import PrefixContext from './PrefixContext';
 import ListContext from './ListContext';
 import useWatch from './useWatch';
 
@@ -31,7 +32,7 @@ RefForm.List = List;
 RefForm.useForm = useForm;
 RefForm.useWatch = useWatch;
 
-export { FormInstance, Field, List, useForm, FormProvider, FieldContext, ListContext, useWatch };
+export { FormInstance, Field, List, useForm, FormProvider, FieldContext, ListContext, PrefixContext, useWatch };
 
 export type { FormProps };
 

src/interface.ts

@@ -247,11 +247,6 @@ export interface FormInstance<Values = any> {
 export type InternalFormInstance = Omit<FormInstance, 'validateFields'> & {
   validateFields: InternalValidateFields;
 
-  /**
-   * Passed by field context props
-   */
-  prefixName?: InternalNamePath;
-
   validateTrigger?: string | string[] | false;
 
   /**