diff --git a/src/cascader/_example/load.tsx b/src/cascader/_example/load.tsx index b72e433cb0..e0a4ef05dc 100644 --- a/src/cascader/_example/load.tsx +++ b/src/cascader/_example/load.tsx @@ -1,11 +1,13 @@ import React, { useState } from 'react'; -import { Cascader } from 'tdesign-react'; +import { Cascader, Space } from 'tdesign-react'; import type { CascaderProps, CascaderValue } from 'tdesign-react'; import type { TreeOptionData } from '../../common'; export default function Example() { - const [value1, setValue1] = useState([]); + const [singleValue, setSingleValue] = useState(''); + const [multipleValue, setMultipleValue] = useState([]); + const options = [ { label: '选项1', @@ -19,8 +21,12 @@ export default function Example() { }, ]; - const onChange1: CascaderProps['onChange'] = (value) => { - setValue1(value); + const onSingleChange: CascaderProps['onChange'] = (value) => { + setSingleValue(value); + }; + + const onMultipleChange: CascaderProps['onChange'] = (value) => { + setMultipleValue(value); }; const load: CascaderProps['load'] = (node) => @@ -40,8 +46,13 @@ export default function Example() { ]; } resolve(nodes); - }, 1000); + }, 300); }); - return ; + return ( + + + + + ); } diff --git a/src/cascader/hooks.tsx b/src/cascader/hooks.tsx index 6b80a84398..b42aa67f65 100644 --- a/src/cascader/hooks.tsx +++ b/src/cascader/hooks.tsx @@ -1,12 +1,13 @@ -import { useState, useEffect, useMemo } from 'react'; +import { useState, useEffect, useMemo, useRef } from 'react'; -import { isEqual , isFunction } from 'lodash-es'; +import { isEqual, isFunction } from 'lodash-es'; import TreeStore from '../_common/js/tree-v1/tree-store'; import { getTreeValue, getCascaderValue, isEmptyValues, isValueInvalid } from './core/helper'; import { treeNodesEffect, treeStoreExpendEffect } from './core/effect'; import useControlled from '../hooks/useControlled'; + import type { TreeNode, TreeNodeValue, @@ -83,6 +84,15 @@ export const useCascaderContext = (props: TdCascaderProps) => { */ const { disabled, options = [], keys = {}, checkStrictly = false, lazy = true, load, valueMode = 'onlyLeaf' } = props; + + const optionCurrent = useRef(options); + + useEffect(() => { + if (!isEqual(optionCurrent.current, options)) { + optionCurrent.current = options; + } + }, [options]); + useEffect(() => { if (!treeStore) { if (!options.length) return; @@ -99,6 +109,7 @@ export const useCascaderContext = (props: TdCascaderProps) => { }, }); store.append(options as Array); + setTreeStore(store); } else { treeStore.reload(options); @@ -107,7 +118,7 @@ export const useCascaderContext = (props: TdCascaderProps) => { treeNodesEffect(inputVal, treeStore, setTreeNodes, props.filter, checkStrictly); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [options]); + }, [optionCurrent.current]); useEffect(() => { if (!treeStore) return; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 9eea360bdf..85e91c87cf 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -19502,42 +19502,103 @@ exports[`csr snapshot test > csr test src/cascader/_example/keys.tsx 1`] = ` exports[`csr snapshot test > csr test src/cascader/_example/load.tsx 1`] = `
- - - - - - + + + + + +
+
+
+
+
+
+
+
+
+ + + select cascader data + + + + + + +
+
@@ -136715,7 +136776,7 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/filterable.tsx 1`] = exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"
请选择
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/load.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/load.tsx 1`] = `"
请选择
"`; exports[`ssr snapshot test > ssr test src/cascader/_example/max.tsx 1`] = `"
请选择
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 605b8142df..ea951e9a6f 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -190,7 +190,7 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/filterable.tsx 1`] = exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"
请选择
"`; -exports[`ssr snapshot test > ssr test src/cascader/_example/load.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/cascader/_example/load.tsx 1`] = `"
请选择
"`; exports[`ssr snapshot test > ssr test src/cascader/_example/max.tsx 1`] = `"
请选择
"`;