用于电容器存储的定制挂钩

Posted 2023-03-13

【中文标题】用于电容器存储的定制挂钩

【英文标题】：Custom hook for Capacitor storage

【发布时间】：2021-11-27 10:56:17

【问题描述】：

我正在尝试实现一个自定义钩子，它通过自动将当前状态值保存在电容器存储中来扩展 useState()。 在这种情况下，我正在努力使用电容器存储插件的异步功能，这导致我的“自定义状态”实际上是一个承诺：/ 有什么想法可以解决这个问题吗？我已经尝试将value 初始化为未定义状态，并通过确定初始值来扩展 useCallback。但这没有用。

自定义钩子：

import  useCallback, useState  from "react";
import  Plugins  from '@capacitor/core';
import  AnyObject  from "../models/SomeModels";
const  Storage  = Plugins;

const APP_NAME = 'de.xxx.yyy';

const getStorage = async(key: string, defaultValue: string|AnyObject) => 
  const  value  = await Storage.get(
    key: `$APP_NAME.$key`
  );
  let returnValue;
  try 
    if (value) 
      returnValue = JSON.parse(value);
    ;
   catch(e) 
    returnValue = value;
  ;
  return returnValue || defaultValue;
;

export const useStorage = (key: string, defaultValue: string|AnyObject) => 
  const [value, setValue] = useState<string|AnyObject>(async() => await getStorage(key, defaultValue));

  useCallback(() => 
    if (value) 
      let newValue;
      try 
        newValue = JSON.stringify(value);
       catch(e) 
        newValue = value;
      ;
      Storage.set(
        key: `$APP_NAME.$key`,
        value: newValue as string
      );
    ;
  , [key, value]);

  return [value, setValue];
;

组件：

[...]
  const [test, setTest] = useStorage('Test', '1');
[...]
  return (
  [...]
    <IonItem>
      <IonLabel>Test</IonLabel>
      <IonInput value=test as string />
    </IonItem>
[...]

结果：

我从this blog 得到了这个钩子的想法。

编辑： 通过为 IonInput 添加更改处理程序 (onIonChange=e => setTest(e.detail.value!))，我发现 setTest 也不起作用。

Dieser Ausdruck kann nicht aufgerufen werden。 Esist kein Bestandteil vom Typ "string | AnyObject" aufrufbar.ts(2349) 常量 setTest: 字符串 |任何对象

【参考方案1】：

我想了又想，午饭后终于搞定了。 我必须将 value 初始化为空状态，将 useCallback 更改为 useEffect 并将空大小写添加到我的条件中。 也许有人可以解释一下，为什么我必须在最后设置as const？

import  useEffect, useState  from "react";
import  Plugins  from '@capacitor/core';
import  AnyObject  from "../models/SomeModels";
const  Storage  = Plugins;

const APP_NAME = 'de.xxx.yyy';

const getStorage = async(key: string, defaultValue: string|AnyObject) => 
  const  value  = await Storage.get(
    key: `$APP_NAME.$key`
  );
  let returnValue;
  try 
    if (value) 
      returnValue = JSON.parse(value);
    ;
   catch(e) 
    returnValue = value;
  ;
  return returnValue || defaultValue;
;

export const useStorage = (key: string, defaultValue: string|AnyObject) => 
  const [value, setValue] = useState<string|AnyObject>();

  useEffect(() => 
    if (value || typeof value === 'string') 
      let newValue;
      try 
        newValue = JSON.stringify(value);
       catch(e) 
        newValue = value;
      ;
      Storage.set(
        key: `$APP_NAME.$key`,
        value: newValue as string
      );
     else 
      getStorage(key, defaultValue).then(v => setValue(v));
    ;
  , [key, value, defaultValue]);

  return [value, setValue] as const;
;

【讨论】：

***.com/questions/66993264/…