fix storage hook

src/hooks/Setting.js

@@ -5,16 +5,13 @@ import { createContext, useCallback, useContext, useMemo } from "react";
 import { debounce } from "../libs/utils";
 
 const SettingContext = createContext({
-  setting: {},
+  setting: null,
   updateSetting: async () => {},
   reloadSetting: async () => {},
 });
 
 export function SettingProvider({ children }) {
-  const { data, update, reload, loading } = useStorage(
+  const { data, update, reload } = useStorage(STOKEY_SETTING, DEFAULT_SETTING);
-    STOKEY_SETTING,
-    DEFAULT_SETTING
-  );
 
   const syncSetting = useMemo(
     () =>
@@ -32,7 +29,7 @@ export function SettingProvider({ children }) {
     [update, syncSetting]
   );
 
-  if (loading) {
+  if (!data) {
     return;
   }
 

src/hooks/Storage.js

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import { storage } from "../libs/storage";
 
-export function useStorage(key, defaultVal = null) {
+export function useStorage(key, defaultVal) {
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState(defaultVal);
+  const [data, setData] = useState(null);
 
   const save = useCallback(
     async (val) => {
@@ -15,7 +15,7 @@ export function useStorage(key, defaultVal = null) {
 
   const update = useCallback(
     async (obj) => {
-      setData((pre) => ({ ...pre, ...obj }));
+      setData((pre = {}) => ({ ...pre, ...obj }));
       await storage.putObj(key, obj);
     },
     [key]
@@ -27,6 +27,23 @@ export function useStorage(key, defaultVal = null) {
   }, [key]);
 
   const reload = useCallback(async () => {
+    try {
+      setLoading(true);
+      const val = await storage.getObj(key);
+      if (val) {
+        setData(val);
+      }
+    } catch (err) {
+      console.log("[storage reload]", err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [key]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true);
         const val = await storage.getObj(key);
         if (val) {
           setData(val);
@@ -34,20 +51,13 @@ export function useStorage(key, defaultVal = null) {
           setData(defaultVal);
           await storage.setObj(key, defaultVal);
         }
-  }, [key, defaultVal]);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        setLoading(true);
-        await reload();
       } catch (err) {
-        //
+        console.log("[storage load]", err.message);
       } finally {
         setLoading(false);
       }
     })();
-  }, [reload]);
+  }, [key, defaultVal]);
 
   return { data, save, update, remove, reload, loading };
 }

src/views/Options/Rules.js

@@ -526,6 +526,10 @@ function UserRules({ subRules }) {
     }
   }, [showAdd]);
 
+  if (!rules.list) {
+    return;
+  }
+
   return (
     <Stack spacing={3}>
       <Stack

src/views/Options/SyncSetting.js

@@ -44,6 +44,10 @@ export default function SyncSetting() {
     }
   };
 
+  if (!sync) {
+    return;
+  }
+
   const { syncUrl = "", syncKey = "" } = sync;
 
   return (