Merge pull request #1544 from XiaoMi/feature/#1543

fix: #1543
XiaoMi · Jan 26, 2021 · 4f02a96 · 4f02a96
2 parents 74b8df7 + a49d8d9
commit 4f02a96
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - 修复 `SelectTree` 单选形态下受控问题 [#1519](https://github.com/XiaoMi/hiui/issues/1519)
 - 修复 `Select` 组件分组形态 filterOption 函数无法使用问题 [#1497](https://github.com/XiaoMi/hiui/issues/1497)
 - 修复 `Select` 组件分组形态全选以及受控问题 [#1501](https://github.com/XiaoMi/hiui/issues/1501)
+- 修复 `Select` 异步数据请求返回结果顺序异常 [#1543](https://github.com/XiaoMi/hiui/issues/1543)
 - 修复 `Tabs` 组件垂直方向样式显示异常问题 [#1493](https://github.com/XiaoMi/hiui/issues/1493)
 - 修复 `Form` DatePicker、SelectTree 在 Form.Item 中点击清空Icon 无效问题 [#1524](https://github.com/XiaoMi/hiui/issues/1524)
 - 优化 `Checkbox` 样式相关内容 [#1482](https://github.com/XiaoMi/hiui/issues/1482)

diff --git a/components/select/Select.js b/components/select/Select.js
@@ -49,7 +49,8 @@ const InternalSelect = (props) => {
   const [isFocus, setIsFouces] = useState(false)
   const SelectWrapper = useRef()
   const targetByKeyDown = useRef(false)
-
+  const CancelToken = HiRequest.CancelToken
+  let cancel
   // 存储问题
   const [cacheSelectItem, setCacheSelectItem] = useState([])
 
@@ -403,30 +404,39 @@ const InternalSelect = (props) => {
     options.params = key ? { [key]: keyword, ...params } : params
 
     const _withCredentials = withCredentials || credentials === 'include'
-
+    // 取消上一次的请求
+    const CANCEL_STATE = 'Cancel'
+    typeof cancel === 'function' && cancel(CANCEL_STATE)
     HiRequest({
       url,
       method,
       data: data,
+      cancelToken: new CancelToken((c) => {
+        cancel = c
+      }),
       withCredentials: _withCredentials,
       error,
       beforeRequest: (config) => {
         setLoading(true)
         return config
       },
       errorCallback: (err) => {
-        setLoading(false)
+        const { message = 'normal' } = err
+        setLoading(message === CANCEL_STATE)
         error && error(err)
       },
       ...options
     }).then(
       (response) => {
-        setLoading(false)
-        const dataItems = transformResponse && transformResponse(response.data, response)
-        if (Array.isArray(dataItems)) {
-          setDropdownItems(dataItems)
-        } else {
-          console.error('transformResponse return data is not array')
+        const { message = 'normal' } = response
+        if (message !== CANCEL_STATE) {
+          setLoading(false)
+          const dataItems = transformResponse && transformResponse(response.data, response)
+          if (Array.isArray(dataItems)) {
+            setDropdownItems(dataItems)
+          } else {
+            console.error('transformResponse return data is not array')
+          }
         }
       },
       (error) => {

diff --git a/docs/demo/select/section-async.jsx b/docs/demo/select/section-async.jsx
@@ -25,7 +25,7 @@ class Demo extends React.Component {
           key: 'id',
           url: 'https://mife-gallery.test.mi.com/hiui/stores',
           transformResponse: (res) => {
-            if(res.code === 200){
+            if(res && res.code === 200){
               return res.data
             }
             return []
@@ -68,7 +68,7 @@ class Demo extends React.Component {
           url: 'https://mife-gallery.test.mi.com/hiui/stores',
           params:{id: keyword},
           transformResponse: (res) => {
-            if(res.code === 200){
+            if(res && res.code === 200){
               return res.data
             }
             return []
@@ -127,7 +127,7 @@ class Demo extends React.Component {
           url: 'https://mife-gallery.test.mi.com/hiui/stores',
           params:{id: keyword},
           transformResponse: (res) => {
-            if(res.code === 200){
+            if(res && res.code === 200){
               return res.data
             }
             return []