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

Question

一般来说，我是 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
  };
};

现在的问题： React.FC 中的 readVars() 调用不会等待自定义挂钩中的 get。当我在读取时记录输出时，我发现这是一个未实现的承诺。自然地，这会提示 JSON.parse() 抛出一个错误，因为它可以解析的字符串还没有被读取。

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

如果有更简单的方法来将 JSON 字符串读写到某种形式的持久性（！）存储中，我很乐意了解它！

Answer 1

我认为这是经典 async/await 问题。

由于您将函数 'writeVars' 声明为异步，所以我希望函数 'set()' 本质上是异步的。如果是，请在 'set' 函数前添加 await。
如果'get'函数也是异步函数，则在其前面添加await并在'readVars'函数声明中添加'async'。
如果第 1 点和第 2 点是正确的，那么在函数 'writeVars' 和 'readVars' 之前调用它们的地方添加 await 并在调用函数的函数声明中添加 async

Answer 2

问题是无法在 React.FC 块中 await。然而，下面的工作就像一个魅力：

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

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

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

How do I read from local storage in Ionic React?

reactjs

react-native

ionic-native

ionic-react