React Native使用AsyncStorage存储对象报错及useEffect警告问题

一、JSON Parse 错误原因及解决 #

你遇到的 SyntaxError: JSON Parse error: Unexpected identifier "object" 错误，根源在于两处代码问题：

1. 错误传递参数给 get 函数
   forSaving.store 是异步函数，调用后返回的是 Promise 对象，你将这个 Promise 传给了 forSaving.get 作为 key 参数，导致实际查询的键是 cache[object Promise]（Promise 对象转字符串的结果）。如果这个键对应的存储内容不是有效的 JSON 格式，就会触发 JSON 解析错误。

2. 异步操作未正确等待
   store 和 get 都是异步操作，你同步调用这两个方法时，get 可能在 store 完成前就执行，根本取不到目标数据。

修复后的核心逻辑： #

确保调用 get 时传入正确的字符串 key，并用 await 等待异步操作完成：

import { useEffect } from 'react';
import forSaving from "./forSaving";

const obj = { id: 1, word: "This is a word" };
const About = () => {
  useEffect(() => {
    // 在 useEffect 内部定义异步函数并执行
    const fetchData = async () => {
      // 等待存储完成
      await forSaving.store("test", obj);
      // 传入正确的字符串 key，等待获取结果
      const getTest = await forSaving.get("test");
      console.log(getTest);
    };

    fetchData();
  }, []);
};

export default About;

二、useEffect 警告问题解决 #

你修改代码后出现的 Warning: useEffect must not return anything besides a function, which is used for clean-up 警告，是因为useEffect 的回调函数不能是 async 函数。async 函数默认返回 Promise，而 useEffect 只允许回调返回清理函数或 undefined。

修复方法： #

不要将 useEffect 的回调直接设为 async，而是在回调内部定义异步函数并调用（如上面的代码示例），这样 useEffect 的回调返回的是 undefined，符合要求。

如果需要清理操作，可以在内部的异步函数中处理，或者返回一个清理函数：

useEffect(() => {
  const fetchData = async () => {
    // 异步操作逻辑
  };

  fetchData();

  // 可选：返回清理函数
  return () => {
    // 清理逻辑，比如取消请求、移除监听等
  };
}, []);

内容的提问来源于stack exchange，提问作者sahasrabhuja neuron