improvement(treepicker): always using renderValue when value is exist

src/CheckTreePicker/CheckTreePicker.tsx

@@ -1210,19 +1210,25 @@ class CheckTreePicker extends React.Component<CheckTreePickerProps, CheckTreePic
     const selectedItems = this.getSelectedItems(selectedValues);
     let selectedElement: React.ReactNode = placeholder;
 
-    if (hasValue && selectedValues.length) {
-      selectedElement = (
-        <SelectedElement
-          selectedItems={selectedItems}
-          countable={countable}
-          valueKey={valueKey}
-          labelKey={labelKey}
-          prefix={this.addPrefix}
-          cascade={cascade}
-          locale={locale}
-        />
-      );
-      if (renderValue) {
+    /**
+     * 如果 value 不合法，同时没有设置 renderValue， 则忽略值，显示 placeholder
+     * 如果 value 不合法，但是设置了 renderValue， 则执行 renderValue 并显示
+     */
+    if (selectedValues.length) {
+      if (hasValue) {
+        selectedElement = (
+          <SelectedElement
+            selectedItems={selectedItems}
+            countable={countable}
+            valueKey={valueKey}
+            labelKey={labelKey}
+            prefix={this.addPrefix}
+            cascade={cascade}
+            locale={locale}
+          />
+        );
+      }
+      if (_.isFunction(renderValue)) {
         selectedElement = renderValue(selectedValues, selectedItems, selectedElement);
       }
     }

src/TreePicker/TreePicker.tsx

@@ -239,11 +239,18 @@ class TreePicker extends React.Component<TreePickerProps, TreePickerState> {
 
       this.focusNode(activeNode);
       this.unserializeLists('expand', expandItemValues);
+
+      let newState = {};
+      if (activeNode) {
+        newState = { activeNode: activeNode };
+      }
       this.setState({
-        data: nextData,
-        filterData,
-        activeNode,
-        expandItemValues: this.serializeList('expand')
+        ...{
+          data: nextData,
+          filterData,
+          expandItemValues: this.serializeList('expand')
+        },
+        ...newState
       });
     }
   }
@@ -1107,15 +1114,22 @@ class TreePicker extends React.Component<TreePickerProps, TreePickerState> {
       style,
       ...rest
     } = this.props;
-    const { activeNode } = this.state;
+    const { selectedValue, activeNode } = this.state;
     const classes = getToggleWrapperClassName('tree', this.addPrefix, this.props, !!activeNode);
 
     let selectedElement: React.ReactNode = placeholder;
     const hasValue = !!activeNode;
-    if (hasValue) {
-      selectedElement = activeNode?.[labelKey];
-      if (renderValue && activeNode) {
-        selectedElement = renderValue(activeNode[valueKey], activeNode, selectedElement);
+    /**
+     * 如果 value 不合法，同时没有设置 renderValue， 则忽略值，显示 placeholder
+     * 如果 value 不合法，但是设置了 renderValue， 则执行 renderValue 并显示
+     */
+    if (!_.isNil(selectedValue)) {
+      if (hasValue) {
+        selectedElement = activeNode[labelKey];
+      }
+      if (_.isFunction(renderValue)) {
+        const node = activeNode ?? {};
+        selectedElement = renderValue(node[valueKey], node, selectedElement);
       }
     }
 

src/TreePicker/test/TreePickerSpec.js

@@ -110,7 +110,7 @@ describe('TreePicker', () => {
           { label: '2', value: '2' }
         ]}
         value={'2'}
-        renderValue={(value, item, selectedElement) => `Selected: ${item.label}`}
+        renderValue={(value, item) => `Selected: ${item.label}`}
       />
     );