fix: 数组容器组件key兜底使用数组下标导致删除错乱 (#131)

jd-opensource · Jan 23, 2022 · cc73d8d · cc73d8d
1 parent fd734d1
commit cc73d8d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/packages/drip-form/src/container/ArrayContainer/index.tsx b/packages/drip-form/src/container/ArrayContainer/index.tsx
@@ -3,9 +3,9 @@
  * @Author: jiangxiaowei
  * @Date: 2021-08-11 15:25:43
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-18 17:06:44
+ * @Last Modified time: 2022-01-23 14:35:56
  */
-import React, { useMemo, memo } from 'react'
+import React, { useMemo, memo, useEffect } from 'react'
 import cx from 'classnames'
 import { typeCheck, number2Chinese } from '@jdfed/utils'
 import { useArray } from '@jdfed/hooks'
@@ -122,6 +122,19 @@ const arrayContainer = memo<Props & RenderFnProps & ArrayProps>(
     const addIcon = useMemo(() => <FontAwesomeIcon icon={faPlus} />, [])
     const Popconfirm = uiComponents[theme]?.Popconfirm
 
+    // 初次加载，设置默认key
+    useEffect(() => {
+      if (!arrayKey[fieldKey]) {
+        dispatch({
+          type: 'setArrayKey',
+          action: {
+            fieldKey,
+          },
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
     return (
       <>
         {/* generator模式需要默认展示一份表单，自增模式、元祖模式由数据渲染表单 */}

diff --git a/packages/drip-form/src/reducers/index.ts b/packages/drip-form/src/reducers/index.ts
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2020-05-14 15:43:02
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-13 16:37:39
+ * @Last Modified time: 2022-01-23 14:33:45
  */
 import { createContext, Dispatch } from 'react'
 import {
@@ -155,11 +155,29 @@ const formDataReducer = (state: State, action: Action): void => {
     case 'setArrayKey': {
       const { isDelete, fieldKey, order } = action.action
       // 当前数组的所有react key
-      const fieldKeyComKey = state.arrayKey[fieldKey] || []
-      if (isDelete) {
+      let fieldKeyComKey = state.arrayKey[fieldKey] || []
+      if (isDelete && order) {
         fieldKeyComKey.splice(order, 1)
       } else {
-        fieldKeyComKey[order] = randomString(52)
+        if (order) {
+          fieldKeyComKey[order] = randomString(52)
+        } else {
+          try {
+            const formDataKey = fieldKey.split('.')
+            const fieldData = formDataKey.reduce((prev, cur) => {
+              if (prev[cur]) {
+                return prev[cur]
+              } else {
+                return []
+              }
+            }, state.formData)
+            fieldKeyComKey = fieldData.map(() => {
+              return randomString(52)
+            })
+          } catch (error) {
+            // console.log(error)
+          }
+        }
         state.arrayKey[fieldKey] = fieldKeyComKey
       }
     }

diff --git a/packages/utils/src/type.ts b/packages/utils/src/type.ts
@@ -129,10 +129,10 @@ type DeleteUiSchemaAction = {
 type SetArrayKey = {
   type: 'setArrayKey'
   action: {
-    // 添加或删除的位置
-    order: number
     // 数组父级fieldKey
     fieldKey: string
+    // 添加或删除的位置 （order为undefiedn，则全量设置当前fieldKey的key）
+    order?: number
     // 是否删除 默认添加
     isDelete?: boolean
   }