javascript 在react native中,我尝试在AsyncStorage中保存对象,但我的应用程序抛出了一个错误

agxfikkp  于 2023-03-06  发布在  Java
关注(0)|答案(1)|浏览(94)

我只想使用AsyncStorage将一个简单对象保存到本地存储中,但我的应用程序抛出一个错误消息"[SyntaxError:JSON解析错误:意外的标识符"对象"]
下面是我的代码:

import forSaving from "./forSaving";

function About() {
  const obj = { id: 1, word: "This is a word" };

  const test = forSaving.store("test", obj);

  const getTest = forSaving.get(test);
  console.log(getTest);
}
export default About;

我的目标只是在这里使用console. log(getTest)。
下面是AsyncStorage的一个可重用组件,我刚刚从Mosh的一门课上抄下来的,所以,我想这里应该没什么问题吧?

import AsyncStorage from "@react-native-async-storage/async-storage";
import moment from "moment";

const prefix = "cache";
const expiryInMinutes = 10;

const store = async (key, value) => {
  try {
    const item = {
      value,
      timestamp: Date.now(),
    };

    await AsyncStorage.setItem(prefix + key, JSON.stringify(item));
  } catch (error) {
    console.log(error);
  }
};

const isExpired = (item) => {
  //I corrected Data to Date
  const now = moment(Date.now());
  const storedTime = moment(item.timestamp);

  return now.diff(storedTime, "minutes") > expiryInMinutes;
};

const get = async (key) => {
  try {
    //I added await here
    const value = await AsyncStorage.getItem(prefix + key);
    const item = JSON.parse(value);

    if (!item) return null;

    if (isExpired(item)) {
      await AsyncStorage.removeItem(prefix + key);
      return null;
    }

    return item.value;
  } catch (error) {
    console.log(error);
  }
};

export default {
  store,
  get,
};

然而,它抛出了那个错误...现在我不知道该怎么做来修复这个错误。你能看一下我的代码,告诉我哪里出错了吗?先谢谢你。

在按照建议和介绍了sugessted代码,它终于成功地得到了工作!

import forSaving from "./forSaving";

const obj = { id: 1, word: "This is a word" };
const About = () => {
  useEffect(async () => {
    const storeAndGet = async () => {
      forSaving.store("test", obj);

      const getTest = await forSaving.get("test");
      return getTest;
    };

    const result = await storeAndGet();
    console.log(result);
  }, []);
};

export default About;

哦,这仍然会抛出一个错误Warning: useEffect must not return anything besides a function, which is used for clean-up.,但我想这是另一个需要处理的问题

2sbarzqh

2sbarzqh1#

在我输入这个问题的时候,你的问题发生了变化,现在它包含了一个不同的错误和两个版本的About函数。最初的答案基本上仍然适用,但是我会补充一点,如果你的About函数是一个React组件,它需要返回JSX或null等。

原始答案

我认为这个错误很可能是由于您的test变量是一个Promise,您应该将文字字符串"test"传递给get()调用:

const getTest = forSaving.get("test");

您的store函数没有(显式地)返回任何内容,因此您并不清楚test变量在这里应该是什么:

const test = forSaving.store("test", obj);

您将遇到的下一个问题是get返回一个承诺,而不是一个值,因此您需要等待它解决。
您可以使用async/await解决此问题:

// async is required to use await
async function About () {
  const obj = { id: 1, word: "This is a word" };

  forSaving.store("test", obj);

  // wait for the promise returned by get()
  // to resolve to a value before proceeding
  const getTest = await forSaving.get("test");
}

最后,您可能会注意到get()并不总是解析为您刚刚存储的值。这是因为store()也是异步的,如果您在调用get()之前不等待它完成其工作,则存储的值可能还不存在。同样,修复方法是在继续之前等待store()

async function About () {
  const obj = { id: 1, word: "This is a word" };

  // wait for store to finish before continuing
  await forSaving.store("test", obj);

  const getTest = await forSaving.get("test");
}

相关问题