如何从Ionic React的本地存储中读取内容？

问题描述

我是React和Ionic以及JS的新手，所以我遵循the tutorial并尝试使其适应我的用例。

我要实现的目标如下：

• 在应用加载时从本地存储读取JSON字符串
• 在应用退出时将（较新的）JSON写回到存储中

我现在所拥有的（被截断）：

ExploreContainer.tsx

import { useStore } from '../hooks/useFilesystem';

var vars = { intervaltime : 50000 /* ... */ };

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  const { writeVars,readVars } = useStore();
  writeVars();
  if ( vars.intervaltime == 50000 ) {
    vars = JSON.parse( readVars() );  
  }
  console.log( vars );
  // ...

useFilesystem.ts

import { useStorage } from '@ionic/react-hooks/storage';
import { vars } from '../components/ExploreContainer';

const FILESTORAGE = "files";

export function useStore() {    
  const { get,set } = useStorage();

  const writeVars = async () => {
    set(FILESTORAGE,JSON.stringify(vars));
  };
  const readVars = function() {
    get(FILESTORAGE).then((value) => { return value });
  }
  return {
    writeVars,readVars
  };
};

现在的问题是： readVars()中的React.FC调用不会等待自定义钩子中的get。当我将输出记录为读取时，我看到这是一个未兑现的承诺。自然，这会提示JSON.parse()引发错误，因为尚未解析它解析出的字符串。

我试图在React.FC中声明一个异步函数，所以我可以等待它，但是函数声明是不可能的，因为FC始终处于严格模式。 我还尝试在React.FC之前声明异步函数，但这并不能正常工作，因为如果我正确解释了错误消息，就不能在FC外部调用该钩子。 在自定义钩子中，我以前有一个await语句，而不是.then，但是行为是相同的。

如果有一种更简便的方法可以将JSON字符串读写到某种形式的persistent（！）存储中，我很乐意学习！

解决方法

我认为这仅是经典的异步/等待问题。

1. 当您将函数'writeVars'声明为异步时，因此我希望函数'set（）'本质上是异步的。如果是这样，请在“设置”功能前添加一个等待状态。
2. 如果“ get”函数也是异步函数，则在其前面添加await并将“ async”添加到“ readVars”函数声明中。
3. 如果点1和点2正确，则在调用“ writeVars”和“ readVars”的函数之前添加await，并将异步添加到调用函数的函数声明中。

,

问题是无法在await块中React.FC。 但是，以下内容很吸引人：

var readPromise = readVars();
readPromise.then(function(result) {
  vars = JSON.parse(result);
  //doing stuff to the data
});

这确保JSON.parse(result)仅在成功解决readVars-promise时执行。