优化客户端请求时候操作的页面不更新

app/routes/rules._index.tsx

@@ -185,6 +185,8 @@ export default function RulesIndex() {
   
   // 添加一个路由变化计数器
   const [routeChangeCount, setRouteChangeCount] = useState(0);
+  // 添加一个状态来跟踪是否执行了删除操作
+  const [isDeleting, setIsDeleting] = useState(false);
   
   // 获取当前的ruleType值
   const ruleTypeParam = searchParams.get('ruleType');
@@ -203,11 +205,11 @@ export default function RulesIndex() {
   const isDeveloper = userRole === 'developer';
   
   // 在组件渲染时初始化状态
-  useEffect(() => {
-    setFilteredRules(initialRules);
-    setFilteredTotalCount(initialTotalCount);
-    setRuleTypes(initialRuleTypes);
-  }, [initialRules, initialTotalCount, initialRuleTypes]);
+  // useEffect(() => {
+  //   setFilteredRules(initialRules);
+  //   setFilteredTotalCount(initialTotalCount);
+  //   setRuleTypes(initialRuleTypes);
+  // }, [initialRules, initialTotalCount, initialRuleTypes]);
 
   // 使用useEffect监听loaderData.error变化并显示Toast
   useEffect(() => {
@@ -310,18 +312,26 @@ export default function RulesIndex() {
   // loading: 加载中状态
   // idle: 空闲状态
   useEffect(() => {
-    if (fetcher.data && fetcher.state === 'idle') {
+    // 仅在fetcher有数据且状态为idle时处理
+    if (fetcher.data && fetcher.state === 'idle' && isDeleting) {
+      // 重置删除状态
+      setIsDeleting(false);
+      
       if (fetcher.data.result) {
         toastService.success(fetcher.data.message);
+        // 删除成功后重新加载数据
+        fetchData();
       } else if (!fetcher.data.result) {
+        // 删除失败只显示错误信息，不刷新数据
         if(fetcher.data.message.includes("evaluation_results_evaluation_point_id_fkey")) {
           toastService.error('对表evaluation_points进行更新或删除违反了表evaluation results上的外键约束evaluations results_evaluation _point_id_fkey');
         } else {
           toastService.error(fetcher.data.message);
         }
+        // 删除失败不刷新数据
       }
     }
-  }, [fetcher.data,fetcher.state]);
+  }, [fetcher.data, fetcher.state, fetchData, isDeleting]);
 
   // 在组件挂载时从 sessionStorage 获取 reviewType 并加载数据
   useEffect(() => {
@@ -434,6 +444,8 @@ export default function RulesIndex() {
       confirmText: "删除",
       cancelText: "取消",
       onConfirm: () => {
+        // 设置删除状态为true
+        setIsDeleting(true);
         const form = new FormData();
         form.append("_action", "delete");
         form.append("ruleId", rule.id);