fix(react): fix markup field is not work with strict-mode (#3088)

Author: janryWang

docs/guide/issue-helper.md

@@ -100,7 +100,7 @@ const createIssueURL = ({
   type,
   title,
   version,
-  package,
+  package: pkg,
   reproduceLink,
   reproduceStep,
   expected,
@@ -129,7 +129,7 @@ ${expected || ''}
 ${actually || ''}
 
 ### Package
-${package}@${version}
+${pkg}@${version}
 
 ---
 

docs/guide/issue-helper.zh-CN.md

@@ -100,7 +100,7 @@ const createIssueURL = ({
   type,
   title,
   version,
-  package,
+  package: pkg,
   reproduceLink,
   reproduceStep,
   expected,
@@ -129,7 +129,7 @@ ${expected || ''}
 ${actually || ''}
 
 ### Package
-${package}@${version}
+${pkg}@${version}
 
 ---
 
@@ -351,7 +351,7 @@ export default () => {
                 请尽可能详尽地说明这个需求的用例和场景。最重要的是：解释清楚是怎样的用户体验需求催生了这个功能上的需求。
               </p>
               <p>
-                Fomrily 的一个重要设计原则是保持 API
+                Formily 的一个重要设计原则是保持 API
                 的简洁和直接。通常来说，我们只考虑添加在现有的 API
                 下无法轻松实现的功能。新功能的用例也应当足够常见。
               </p>

packages/react/src/components/SchemaField.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, Fragment } from 'react'
 import { ISchema, Schema } from '@formily/json-schema'
-import { RecursionField } from '.'
+import { RecursionField } from './RecursionField'
 import { render } from '../shared/render'
 import {
   SchemaMarkupContext,
@@ -78,25 +78,22 @@ export function createSchemaField<Components extends SchemaReactComponents>(
 
   SchemaField.displayName = 'SchemaField'
 
-  function MarkupField<
-    Decorator extends ReactComponentPath<Components>,
-    Component extends ReactComponentPath<Components>
-  >(props: ISchemaMarkupFieldProps<Components, Component, Decorator>) {
+  function MarkupRender(props: any) {
     const parent = useContext(SchemaMarkupContext)
     if (!parent) return <Fragment />
     const renderChildren = () => {
       return <React.Fragment>{props.children}</React.Fragment>
     }
     const appendArraySchema = (schema: ISchema) => {
-      if (parent.items) {
-        return parent.addProperty(name, schema)
+      const items = parent.items as Schema
+      if (items && items.name !== props.name) {
+        return parent.addProperty(props.name, schema)
       } else {
-        return parent.setItems(props)
+        return parent.setItems(schema)
       }
     }
-    const name = props.name || getRandomName()
     if (parent.type === 'object' || parent.type === 'void') {
-      const schema = parent.addProperty(name, props)
+      const schema = parent.addProperty(props.name, props)
       return (
         <SchemaMarkupContext.Provider value={schema}>
           {renderChildren()}
@@ -116,6 +113,13 @@ export function createSchemaField<Components extends SchemaReactComponents>(
     }
   }
 
+  function MarkupField<
+    Decorator extends ReactComponentPath<Components>,
+    Component extends ReactComponentPath<Components>
+  >(props: ISchemaMarkupFieldProps<Components, Component, Decorator>) {
+    return <MarkupRender {...props} name={props.name || getRandomName()} />
+  }
+
   MarkupField.displayName = 'MarkupField'
 
   function StringField<