fix: 修复 Cascader loader 属性, 当 data children 为 [] 或 null 时会触发 loader 问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shineout",
-  "version": "2.1.0-rc.1",
+  "version": "2.0.16",
   "description": "Shein 前端组件库",
   "main": "./lib/index.js",
   "module": "./es/index.js",

site/pages/documentation/changelog/2.x.x.md

@@ -1,5 +1,7 @@
 # 更新日志
 
+### 2.0.16
+- 修复 Cascader 使用动态加载时，当 children 为 [] 时仍然触发的问题(< 2.0.16)
 ### 2.0.15
 
 - Table 当无数据的时候关闭 sticky (< 2.0.15)

src/Cascader/Node.tsx

@@ -49,16 +49,15 @@ class Node<U, T extends CascaderBaseValue> extends PureComponent<NodeProps<U, T>
 
   handleClick(e: MouseEvent) {
     const { id, data, path, onChange, onPathChange, loader, multiple, datum, shouldFinal } = this.props
-    if (shouldFinal && this.hasChildren) {
-      this.handlePathChange()
-      return
-    }
+    const { mayChildren, hasChildren } = this
     if (onPathChange) onPathChange(id, data, path, true)
     if (!multiple) {
-      if (onChange && path) onChange([...path, id] as T, datum.getDataById(id) as U)
+      // 单选设置了 final 属性后 如果不是末节点不触发onChange
+      const shouldJump = shouldFinal && hasChildren
+      if ((onChange as any) && path && !shouldJump) onChange([...path, id] as T, datum.getDataById(id) as U)
     }
-
-    if (loader && !this.state.loading && !getParent(e.target as HTMLElement, `.${checkinputClass('_')}`)) {
+    // Cascader 在多选模式下，点击勾选框后仅触发勾选功能，不会触发 loader
+    if (loader && mayChildren && !getParent(e.target as HTMLElement, `.${checkinputClass('_')}`)) {
       this.setState({ loading: true })
       loader(id, data)
     }
@@ -95,13 +94,19 @@ class Node<U, T extends CascaderBaseValue> extends PureComponent<NodeProps<U, T>
     return children && children.length > 0
   }
 
+  get mayChildren() {
+    const { loader, data, childrenKey } = this.props
+    const children = (data[childrenKey!] as unknown) as U[]
+    const { loading } = this.state
+    return loader && !loading && children === undefined
+  }
+
   render() {
-    const { active, data, multiple, datum, id, loader, expandTrigger, childrenKey, shouldFinal } = this.props
+    const { active, data, multiple, datum, id, expandTrigger, childrenKey, shouldFinal } = this.props
     const { loading } = this.state
     const disabled = this.checkDisabled()
     const children = (data[childrenKey!] as unknown) as U[]
-    const { hasChildren } = this
-    const mayChildren = loader && !loading && children === undefined
+    const { hasChildren, mayChildren } = this
     const className = cascaderClass(
       'node',
       active && 'active',
@@ -131,7 +136,7 @@ class Node<U, T extends CascaderBaseValue> extends PureComponent<NodeProps<U, T>
 
     return (
       <div className={className} style={style} {...events}>
-        {multiple && !(shouldFinal && this.hasChildren) && (
+        {multiple && !(shouldFinal && hasChildren) && (
           <Checkbox
             checked={datum.getChecked(id)}
             disabled={disabled}