Repository: ant-design/ant-design-mobile
Pull request #6444 (2023-11-21 08:52:33)

fix: onChange in cascader-view unable to get value
resolved: #6442

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6444.surge.sh
codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6444?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Attention: `5 lines` in your changes are missing coverage. Please review.
> Comparison is base [(`671ea15`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/671ea151194c05856c90ad5a70791ec005268feb?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 92.10% compared to head [(`49bb419`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6444?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) 92.09%.

| [Files](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6444?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Patch % | Lines |
|---|---|---|
| [...onents/cascader-view/use-cascader-value-extend.tsx](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6444?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FzY2FkZXItdmlldy91c2UtY2FzY2FkZXItdmFsdWUtZXh0ZW5kLnRzeA==) | 37.50% | [4 Missing and 1 partial :warning: ](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6444?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) |

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #6444      +/-   ##
==========================================
- Coverage   92.10%   92.09%   -0.01%     
==========================================
  Files         316      316              
  Lines        6861     6866       +5     
  Branches     1719     1720       +1     
==========================================
+ Hits         6319     6323       +4     
- Misses        504      505       +1     
  Partials       38       38              
```



</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6444?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).


Patch:
diff --git a/src/components/cascader-view/cascader-view.tsx b/src/components/cascader-view/cascader-view.tsx
index 5b4d38c05..206f782ec 100644
--- a/src/components/cascader-view/cascader-view.tsx
+++ b/src/components/cascader-view/cascader-view.tsx
@@ -50,10 +50,13 @@ export const CascaderView: FC<CascaderViewProps> = p => {
   const props = mergeProps(defaultProps, p)
 
   const { locale } = useConfig()
-  const generateValueExtend = useCascaderValueExtend(props.options)
   const [labelName, valueName, childrenName, disabledName] = useFieldNames(
     props.fieldNames
   )
+  const generateValueExtend = useCascaderValueExtend(props.options, {
+    valueName,
+    childrenName,
+  })
 
   const [value, setValue] = usePropsValue({
     ...props,
diff --git a/src/components/cascader-view/demos/demo1.tsx b/src/components/cascader-view/demos/demo1.tsx
index 8efd9f163..c20a4f90c 100644
--- a/src/components/cascader-view/demos/demo1.tsx
+++ b/src/components/cascader-view/demos/demo1.tsx
@@ -5,7 +5,7 @@ import { DemoBlock } from 'demos'
 import { options, sameValueOptions } from '../../cascader/demos/data'
 
 export default () => {
-  const [value, setValue] = useState<string[]>([])
+  const [value, setValue] = useState<(string | number)[]>([])
 
   return (
     <>
diff --git a/src/components/cascader-view/use-cascader-value-extend.tsx b/src/components/cascader-view/use-cascader-value-extend.tsx
index a5000d74c..e833c76ec 100644
--- a/src/components/cascader-view/use-cascader-value-extend.tsx
+++ b/src/components/cascader-view/use-cascader-value-extend.tsx
@@ -1,25 +1,28 @@
 import { useMemo } from 'react'
 import memoize from 'lodash/memoize'
-import {
-  CascaderValue,
-  CascaderValueExtend,
-  CascaderOption,
-} from './cascader-view'
+import { CascaderValue, CascaderValueExtend } from './cascader-view'
+import type { CascaderOption } from './cascader-view'
+
+export function useCascaderValueExtend(
+  options: CascaderOption[],
+  fieldNames: CascaderOption
+) {
+  const { valueName, childrenName } = fieldNames
 
-export function useCascaderValueExtend(options: CascaderOption[]) {
   const generateItems = useMemo(() => {
     return memoize(
       (val: CascaderValue[]) => {
         const ret: CascaderOption[] = []
         let currentOptions = options
+
         for (const v of val) {
-          const target = currentOptions.find(option => option.value === v)
+          const target = currentOptions.find(option => option[valueName] === v)
           if (!target) {
             break
           }
           ret.push(target)
-          if (!target.children) break
-          currentOptions = target.children
+          if (!target[childrenName]) break
+          currentOptions = target[childrenName]
         }
 
         return ret
@@ -33,7 +36,9 @@ export function useCascaderValueExtend(options: CascaderOption[]) {
       (val: CascaderValue[]) => {
         const children = val.reduce((currentOptions, v) => {
           return (
-            currentOptions.find(option => option.value === v)?.children || []
+            currentOptions.find(option => option[valueName] === v)?.[
+              childrenName
+            ] || []
           )
         }, options)
 
diff --git a/src/components/cascader/cascader.tsx b/src/components/cascader/cascader.tsx
index 8d0fe4ebb..6024e3117 100644
--- a/src/components/cascader/cascader.tsx
+++ b/src/components/cascader/cascader.tsx
@@ -17,6 +17,7 @@ import { usePropsValue } from '../../utils/use-props-value'
 import CascaderView from '../cascader-view'
 import { useConfig } from '../config-provider'
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend'
+import { useFieldNames } from '../../hooks'
 import type { FieldNamesType } from '../../hooks'
 
 const classPrefix = `adm-cascader`
@@ -110,7 +111,11 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
     },
   })
 
-  const generateValueExtend = useCascaderValueExtend(props.options)
+  const [, valueName, childrenName] = useFieldNames(props.fieldNames)
+  const generateValueExtend = useCascaderValueExtend(props.options, {
+    valueName,
+    childrenName,
+  })
 
   const [innerValue, setInnerValue] = useState<CascaderValue[]>(value)
 


Test patch:
diff --git a/src/components/cascader-view/tests/cascader-view.test.tsx b/src/components/cascader-view/tests/cascader-view.test.tsx
index 5a2681414..a86d1cfe7 100644
--- a/src/components/cascader-view/tests/cascader-view.test.tsx
+++ b/src/components/cascader-view/tests/cascader-view.test.tsx
@@ -83,7 +83,13 @@ describe('CascaderView', () => {
 
     expect(onChange).toBeCalledTimes(3)
     expect(onTabsChange).toBeCalledTimes(2)
-    expect(onChange.mock.calls[2][0]).toEqual(['浙江', '杭州', '西湖区'])
+
+    const [value, extend] = onChange.mock.calls[2]
+    const item = extend.items[0]
+
+    expect(value).toEqual(['浙江', '杭州', '西湖区'])
+    expect(item).toHaveProperty('labelT')
+    expect(item).toHaveProperty('valueT')
   })
   test('controlled mode', async () => {
     const { container } = render(