Переглянути джерело

fix: fix TypeError in Cascader when value is not in TreeData

zhangyumei.0319 1 рік тому
батько
коміт
67792387e7

+ 14 - 0
packages/semi-ui/cascader/__test__/cascader.test.js

@@ -1399,4 +1399,18 @@ describe('Cascader', () => {
         expect(placeholder.getDOMNode().textContent).toEqual('autoMergeValue 为 false');
         cascader.unmount();
     })
+
+    it('value not in TreeData', () => {
+        const cascader = render({
+            multiple: true,
+            value: [ "value", "notIn",  "treeData"],
+            placeholder: "value not in treeData, show placeholder",
+            autoMergeValue: false,
+            filterTreeNode: true,
+        });
+
+        const placeholder = cascader.find(`.${BASE_CLASS_PREFIX}-input`)
+        expect(placeholder.getDOMNode().placeholder).toEqual('value not in treeData, show placeholder');
+        cascader.unmount();
+    })
 });

+ 9 - 4
packages/semi-ui/cascader/index.tsx

@@ -451,7 +451,11 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 formatItem.length > 0 && (formatValuePath.push(formatItem));
             });
             // formatKeys is used to save key of value
-            const formatKeys = formatValuePath.map(v => getKeyByValuePath(v));
+            const formatKeys = formatValuePath.reduce((acc, cur) => { 
+                const key = getKeyByValuePath(cur);
+                keyEntities[key] && acc.push(key);
+                return acc;
+            }, []) as string[];
             return formatKeys;
         };
         const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
@@ -539,11 +543,12 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     renderTagItem = (nodeKey: string, idx: number) => {
         const { keyEntities, disabledKeys } = this.state;
         const { size, disabled, displayProp, displayRender, disableStrictly } = this.props;
-        const isDsiabled =
-            disabled || keyEntities[nodeKey].data.disabled || (disableStrictly && disabledKeys.has(nodeKey));
+
         if (keyEntities[nodeKey]) {
+            const isDisabled =
+            disabled || keyEntities[nodeKey].data.disabled || (disableStrictly && disabledKeys.has(nodeKey));
             const tagCls = cls(`${prefixcls}-selection-tag`, {
-                [`${prefixcls}-selection-tag-disabled`]: isDsiabled,
+                [`${prefixcls}-selection-tag-disabled`]: isDisabled,
             });
             // custom render tags
             if (isFunction(displayRender)) {