0

我是 React 和 Ionic 以及一般 JS 的新手，所以我按照教程并尝试将其调整到我的用例。

我想要实现的是以下内容：

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

我现在拥有的是（严重截断）：

探索容器.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 );
  // ...

使用文件系统.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 字符串读取和写入某种形式的持久性（！）存储，我会很高兴了解它！

4

2 回答 2

0

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

  1. 由于您将函数“writeVars”声明为异步，所以我希望函数“set()”本质上是异步的。如果是这样，请在“设置”功能前添加等待。
  2. 如果 'get' 函数也是异步函数，则在其前面添加 await 并将 'async' 添加到 'readVars' 函数声明中。
  3. 如果第 1 点和第 2 点正确，则在函数“writeVars”和“readVars”前面添加等待，然后在调用函数的函数声明中添加异步。
于 2020-10-12T20:39:31.763 回答
0

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

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

这确保了JSON.parse(result)只有在 readVars-promise 已成功解决时才执行。

于 2020-10-13T16:40:03.577 回答