🐛 fix(webview-ui): resolve react-hooks lint errors in settings flows

Author: littleCareless

webview-ui/src/components/prompts/storage-level-modal.tsx

@@ -25,6 +25,12 @@ export const StorageLevelModal: React.FC<StorageLevelModalProps> = ({
     string | undefined
   >();
 
+  const handleClose = React.useCallback(() => {
+    setSelectedLevel("global");
+    setSelectedWorkspace(undefined);
+    onClose();
+  }, [onClose]);
+
   const handleConfirm = () => {
     if (
       (selectedLevel === "workspace" || selectedLevel === "project") &&
@@ -38,31 +44,23 @@ export const StorageLevelModal: React.FC<StorageLevelModalProps> = ({
       selectedWorkspace,
     );
     onSelect(selectedLevel, selectedWorkspace);
-    onClose();
+    handleClose();
   };
 
-  // 重置状态当模态框关闭时
-  React.useEffect(() => {
-    if (!isOpen) {
-      setSelectedLevel("global");
-      setSelectedWorkspace(undefined);
-    }
-  }, [isOpen]);
-
   if (!isOpen) return null;
 
   return (
     <div
       className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
       onClick={(e) => {
         if (e.target === e.currentTarget) {
-          onClose();
+          handleClose();
         }
       }}
     >
       <div className="bg-[var(--vscode-editor-background)] border border-[var(--vscode-widget-border)] rounded-lg p-6 max-w-md w-full mx-4 shadow-2xl relative">
         <button
-          onClick={onClose}
+          onClick={handleClose}
           className="absolute right-4 top-4 w-6 h-6 flex items-center justify-center rounded hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-foreground)]"
           aria-label="Close dialog"
         >
@@ -209,7 +207,7 @@ export const StorageLevelModal: React.FC<StorageLevelModalProps> = ({
         {/* 按钮区域 */}
         <div className="flex justify-end space-x-2 mt-6">
           <button
-            onClick={onClose}
+            onClick={handleClose}
             className="px-4 py-2 rounded bg-[var(--vscode-button-secondary-background)] text-[var(--vscode-button-secondary-foreground)] hover:bg-[var(--vscode-button-secondary-hover-background)] border border-[var(--vscode-button-border)]"
           >
             {t("cancel")}

webview-ui/src/components/settings/KeyValueField.tsx

@@ -40,11 +40,15 @@ export const KeyValueField: React.FC<KeyValueFieldProps> = ({
       value && typeof value === "object" && !Array.isArray(value)
         ? Object.entries(value as Record<string, string>)
         : [];
-    // Avoid unnecessary re-renders if the value hasn't changed
-    if (JSON.stringify(newHeaders) !== JSON.stringify(localHeaders)) {
-      setLocalHeaders(newHeaders);
-    }
-  }, [value, localHeaders]);
+    // Avoid synchronous setState directly inside effects.
+    queueMicrotask(() => {
+      setLocalHeaders((prevHeaders) =>
+        JSON.stringify(newHeaders) === JSON.stringify(prevHeaders)
+          ? prevHeaders
+          : newHeaders,
+      );
+    });
+  }, [value]);
 
   const handleAddRow = () => {
     const newHeaders = [...localHeaders, ["", ""] as [string, string]];

webview-ui/src/contexts/SettingsContext.tsx

@@ -23,6 +23,7 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const editingProfileId = editingProfile?.id ?? null;
 
   const activeProfile =
     availableProfiles.find((p) => p.id === activeProfileId) || null;
@@ -45,7 +46,7 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({
 
       // 如果当前没有正在编辑的配置，或正在编辑的配置已被删除，则重置为新的活跃配置
       const editingProfileStillExists = data.profiles.some(
-        (p) => p.id === editingProfile?.id,
+        (p) => p.id === editingProfileId,
       );
 
       if (!editingProfileStillExists) {
@@ -58,7 +59,7 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({
         setHasUnsavedChanges(false);
       }
     },
-    [editingProfile?.id],
+    [editingProfileId],
   );
 
   // 加载初始数据
@@ -84,7 +85,10 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({
 
   // 组件挂载时加载数据
   useEffect(() => {
-    loadData();
+    const timer = setTimeout(() => {
+      void loadData();
+    }, 0);
+    return () => clearTimeout(timer);
   }, [loadData]);
 
   // ==================== 操作方法 ====================
@@ -100,7 +104,7 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({
           prev.map((p) => (p.id === profile.id ? { ...profile } : p)),
         );
 
-        if (profile.id === editingProfile?.id) {
+        if (profile.id === editingProfileId) {
           setEditingProfileState({ ...profile });
           setHasUnsavedChanges(false);
         }
@@ -114,7 +118,7 @@ export const SettingsProvider: React.FC<SettingsProviderProps> = ({
         throw err;
       }
     },
-    [editingProfile?.id],
+    [editingProfileId],
   );
 
   const activateProfile = useCallback(

webview-ui/src/pages/settings/SettingsPage.tsx

@@ -106,7 +106,10 @@ export const SettingsPage: React.FC = () => {
   }, [t]);
 
   useEffect(() => {
-    loadData();
+    const timer = setTimeout(() => {
+      void loadData();
+    }, 0);
+    return () => clearTimeout(timer);
   }, [loadData]);
 
   useEffect(() => {
@@ -118,7 +121,9 @@ export const SettingsPage: React.FC = () => {
       "advanced",
     ]);
     if (tab && validTabs.has(tab)) {
-      setSelectedTab(tab);
+      queueMicrotask(() => {
+        setSelectedTab((prevTab) => (prevTab === tab ? prevTab : tab));
+      });
     }
   }, [location.search]);