如何解决如何从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(!)存储中,我很乐意学习!
解决方法
我认为这仅是经典的异步/等待问题。
- 当您将函数'writeVars'声明为异步时,因此我希望函数'set()'本质上是异步的。如果是这样,请在“设置”功能前添加一个等待状态。
- 如果“ get”函数也是异步函数,则在其前面添加await并将“ async”添加到“ readVars”函数声明中。
- 如果点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时执行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。