反應本機 AsyncStorage 問題

Question

我正在嘗試做的事情看起來很簡單，但我遇到了一些重大問題。 我有一個登錄后 JSON object，我想保存並從 AsyncStorage 中檢索。 我知道您無法將 JSON object 保存到存儲中，並且必須對其進行字符串化...這樣做了，當我 go 嘗試將其取出時，它似乎不是有意的。

代碼

登錄.js

await AsyncStorage.setItem("loginData", JSON.stringify(result.data));
await AsyncStorage.setItem("token", result.data.token);
props.navigation.navigate('Home');

主頁.js

export default function Home (props) {
    
    let resData = {};
    let token = await AsyncStorage.getItem("token");
    let announcementData = {};
    let portalTipsData = {};

    getAsyncStorage = async(key) => {
        try {
          const getAsyncStorageData = await AsyncStorage.getItem(key);
          const getAsyncStorageParsed = JSON.parse(getAsyncStorageData);
          return getAsyncStorageParsed;
        } catch (error) {
          console.warn(error);
        }
    }

    getAsyncStorage("loginData").then((result) => {
        resData = result;
        announcementData = resData.Announcements;
        portalTipsData = resData.PortalTips; 

        console.log("Test 1: ", announcementData);
        console.log("Test 2: ", portalTipsData);
    });

奇怪的是，當我嘗試使用 annoucmentData 或 portalTipsData 時，我收到一條錯誤消息，指出對象作為 React 子對象無效（發現：object 和鍵 {_40, _65...
這不是數據應該看起來的樣子，我相信這對我來說是愚蠢的，我想念你們都可以打電話給我。

謝謝，

Answer 1

是的，你是對的，你必須對你的 object 進行字符串化。

AsyncStorage.setItem("loginData", JSON.stringify(result.Data), (err)=> {
    if(err){
        console.log("Something bad happened :(");
    }
    console.log("Boom!");
}).catch((err)=> {
    console.log("error is: " + err);
});

當你閱讀它時，你應該解析它。

try {
    const value = await AsyncStorage.getItem("loginData");
    if (value !== null) {
        console.log(JSON.parse(value));
    }
} catch (error) {
    // Error retrieving data
}

如果這不起作用，那么可以檢查 result.Data 的值

Answer 2

運行上面提供的代碼，發現相關字段可以正常訪問。 我認為您使用上面的 AsyncStorage 沒有任何問題。 可能是您的其他用法錯誤。 但是，對於 AsyncStorage 的使用，我們推薦您使用開源庫react-native-easy-app ，通過它您可以更方便快捷地使用 AsyncStorage。

  import { XStorage } from 'react-native-easy-app';
  import { AsyncStorage } from 'react-native';
  // or import AsyncStorage from '@react-native-community/async-storage';

   export const RNStorage = {
       token: undefined, 
       isShow: undefined, 
       userInfo: undefined
   };
   
  const initCallback = () => {

       // From now on, you can write or read the variables in RNStorage synchronously
       
       // equal to [console.log(await AsyncStorage.getItem('isShow'))]
       console.log(RNStorage.isShow); 
       
       // equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
       RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 
       
       // equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
       RNStorage.userInfo = {name: 'rufeng', age: 30}; 
  };
  
  XStorage.initStorage(RNStorage, AsyncStorage, initCallback);