@hzab/list-render 1.9.0 → 1.9.2-beta

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @hzab/list-render@1.9.3
+
+feat: 列表请求取消上一次列表请求，解决数据返回先后顺序导致展示异常问题
+
+# @hzab/list-render@1.9.2
+
+fix: Drawer 模式 首次编辑 scenario 状态不正确问题修复
+
 # @hzab/list-render@1.9.0
 
 feat: 列表渲染支持 tag 模式、前缀 Node （前缀圆点）

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.9.0",
+  "version": "1.9.2-beta",
   "description": "",
   "main": "src",
   "scripts": {
@@ -20,7 +20,7 @@
   "license": "ISC",
   "devDependencies": {
     "@ant-design/icons": "^4.8.1",
-    "@hzab/data-model": "^1.6.0",
+    "@hzab/data-model": "^1.7.2",
     "@hzab/form-render": "^1.1.5",
     "@hzab/schema-descriptions": "^1.0.0",
     "@hzab/webpack-config": "^0.7.2",
@@ -40,7 +40,7 @@
     "@formily/core": "2.3.1",
     "@formily/react": "2.3.1",
     "@formily/reactive-react": "2.3.1",
-    "@hzab/data-model": ">=1.5.0",
+    "@hzab/data-model": ">=1.7.2",
     "@hzab/form-render": ">=1.0.0",
     "@hzab/schema-descriptions": ">=1.0.0",
     "antd": "4.x",

package/src/FormModal/index.tsx

@@ -29,15 +29,15 @@ export function FormModal(props, parentRef) {
   const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
   const [loading, setLoading] = useState(false);
   const [title, setTitle] = useState("新增");
-  const [scenario, setScenario] = useState("create");
   const [open, setOpen] = useState(false);
   const formRef = useRef<IFormRef>();
+  const scenarioRef = useRef<string>("create");
 
   const FormSlot = useMemo(() => props.Slots?.FormSlot, [props.Slots?.FormSlot]);
 
   function show(formData = props.formInitialValues, title, scenario = "create") {
+    scenarioRef.current = scenario || "create";
     setOpen(true);
-    setScenario(scenario || "create");
     // 处理 formRef.current 为 undefined 的问题
     if (formRef.current?.formRender?.setValues) {
       formRef.current?.formRender?.setValues(formData);
@@ -69,7 +69,7 @@ export function FormModal(props, parentRef) {
         const isContinue = await modalConf.beforeSubmit(submitForm, {
           cancel: close,
           formRef,
-          scenario,
+          scenario: scenarioRef.current,
         });
         if (isContinue === false) {
           return;
@@ -113,7 +113,7 @@ export function FormModal(props, parentRef) {
     close,
     form: formRef.current?.formRender,
     validate,
-    scenario,
+    scenario: scenarioRef.current,
   };
   if (modalConf?.footer) {
     footer = typeof modalConf?.footer === "function" ? modalConf.footer({ ...options, options }) : modalConf?.footer;
@@ -177,14 +177,14 @@ export function FormModal(props, parentRef) {
   return (
     <CModal {..._modalProps}>
       {FormSlot ? (
-        <FormSlot {...props} formRef={formRef} scenario={scenario} schema={props.schema?.schema} />
+        <FormSlot {...props} formRef={formRef} scenario={scenarioRef.current} schema={props.schema?.schema} />
       ) : (
         <FormRender
           {...props.formProps}
           ref={formRef}
           schema={props.schema}
           schemaScope={{
-            scenario: scenario,
+            scenario: scenarioRef.current,
             ...(props.schemaScope || {}),
           }}
           components={props.components}

package/src/list-render.jsx

@@ -5,6 +5,7 @@ model 不要定义在组件外部，避免出现 query 异常的情况。
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Button, message } from "antd";
 import _ from "lodash";
+import { getCancelTokenSource } from "@hzab/data-model/src/axios";
 
 import QueryRender from "./query-render";
 import Pagination from "./pagination-render";
@@ -48,6 +49,7 @@ const ListRender = forwardRef(function (props, parentRef) {
   const formQueryRef = useRef({});
   const paginationQueryRef = useRef({ pageNum: 1, pageSize: 10 });
   const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
+  const getListSourceRef = useRef();
 
   useImperativeHandle(parentRef, () => ({
     getList,
@@ -129,8 +131,20 @@ const ListRender = forwardRef(function (props, parentRef) {
 
     model.query = mergedQueries;
 
+    // 取消上一次请求
+    getListSourceRef.current?.cancel("取消上一次请求");
+
+    // 重新获取 source
+    getListSourceRef.current = getCancelTokenSource();
+
     model
-      ?.getList(mergedQueries)
+      ?.getList(
+        mergedQueries,
+        {},
+        {
+          cancelToken: getListSourceRef.current?.token,
+        },
+      )
       .then((res) => {
         setList(res.list);
         setTotal(res.pagination?.total);
@@ -138,6 +152,10 @@ const ListRender = forwardRef(function (props, parentRef) {
         setListLoading(false);
       })
       .catch((err) => {
+        if (axios.isCancel(error)) {
+          console.log("请求已取消:", error.message);
+          return;
+        }
         console.error(err);
         handleMessage(err._message);
         setListLoading(false);