技術標籤：react hookumireact

1.前期準備

必要條件1：首先得有一個高階表格，沒有自己就去官方文件找一個
必要條件2：高階表格獲取資料來源方式為request
必要條件3：有umi的包 能用useRequest(setTimeout應該也可以但操作應該不一樣)
原因：我用的這個

2.實現

1.定義兩個狀態

params用來裝區域性重新整理的請求資料
compareData用來裝最近兩次請求回來的資料

 const [params, setParams] = useState<any>({});
 const [compareData, setCompareData]
 
 = useState<any[]>([]);

```javascript
request={async (params, sorter, filter) => {
          setParams(params)
          ......

### 2.建立輪詢函式，在其onSuccess函式裡將本次請求得到的資料放入

```java
compareData中  const { data, run, cancel } = useRequest(queryTasks, {
    manual: true,
    pollingInterval: 10000,
    pollingWhenHidden: false,
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
       }
    },
  });
 

3.當compareData的長度為2時，通過對比，判斷是否不同（此處為陣列物件所以轉字串來對比）

    ......
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
      } else if (compareData.length === 2) {
        if (JSON.stringify(compareData[0]) !== JSON.stringify(compareData[
 
1])) {
          console.log(compareData)
        }
      }
    },
  });

4.對比後，如果發生改變就區域性重新整理表格

  ......
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
      } else if (compareData.length === 2) {
        if (JSON.stringify(compareData[0]) !== JSON.stringify(compareData[1])) {
          console.log(compareData);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }
      }
    },
  });

5.對比後，刪掉第一項，保證下一次對比能正常進行。

    ......
    onSuccess: (result, params) => {
      if (compareData.length < 2) {
        setCompareData([...compareData, result]);
      } else if (compareData.length === 2) {
        if (JSON.stringify(compareData[0]) !== JSON.stringify(compareData[1])) {
          console.log(compareData);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }
        setCompareData([compareData[1]]);
      }
    },
  });

6.設定當請求條件變更後執行本函式（第一次進入也會執行）

當請求條件變更後即換頁，查詢等情況，可達到區域性對比區域性重新整理效果
注意需要先停止當前輪詢再開始新的

  useEffect(() => {
    cancel(); //先停止當前輪詢
    setCompareData([]);
    run(params);
  }, [params]);