From 3b1aa1f579ae65054c703b63d87072a916c4b698 Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Fri, 7 Jan 2022 00:55:07 +0800
Subject: [PATCH] fix(Select): options will be overwritten due to seState

---
 .../src/components/Select/Select.tsx          | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/superset-frontend/src/components/Select/Select.tsx b/superset-frontend/src/components/Select/Select.tsx
index c5d41636f82ae..a36a0d569aeb7 100644
--- a/superset-frontend/src/components/Select/Select.tsx
+++ b/superset-frontend/src/components/Select/Select.tsx
@@ -641,30 +641,35 @@ const Select = ({
 
   useEffect(() => {
     if (selectValue) {
-      const array = Array.isArray(selectValue)
-        ? (selectValue as AntdLabeledValue[])
-        : [selectValue as AntdLabeledValue | string | number];
-      const options: AntdLabeledValue[] = [];
-      const isLabeledValue = isAsync || labelInValue;
-      array.forEach(element => {
-        const found = selectOptions.find((option: { value: string | number }) =>
-          isLabeledValue
-            ? option.value === (element as AntdLabeledValue).value
-            : option.value === element,
-        );
-        if (!found) {
-          options.push(
-            isLabeledValue
-              ? (element as AntdLabeledValue)
-              : ({ value: element, label: element } as AntdLabeledValue),
+      setSelectOptions(selectOptions => {
+        const array = Array.isArray(selectValue)
+          ? (selectValue as AntdLabeledValue[])
+          : [selectValue as AntdLabeledValue | string | number];
+        const options: AntdLabeledValue[] = [];
+        const isLabeledValue = isAsync || labelInValue;
+        array.forEach(element => {
+          const found = selectOptions.find(
+            (option: { value: string | number }) =>
+              isLabeledValue
+                ? option.value === (element as AntdLabeledValue).value
+                : option.value === element,
           );
+          if (!found) {
+            options.push(
+              isLabeledValue
+                ? (element as AntdLabeledValue)
+                : ({ value: element, label: element } as AntdLabeledValue),
+            );
+          }
+        });
+        if (options.length > 0) {
+          return [...options, ...selectOptions];
         }
+        // return same options won't trigger a re-render
+        return selectOptions;
       });
-      if (options.length > 0) {
-        setSelectOptions([...options, ...selectOptions]);
-      }
     }
-  }, [labelInValue, isAsync, selectOptions, selectValue]);
+  }, [labelInValue, isAsync, selectValue]);
 
   // Stop the invocation of the debounced function after unmounting
   useEffect(() => () => handleOnSearch.cancel(), [handleOnSearch]);