web-dev-qa-db-ja.com

React Native-AsyncStorageに保存されているものを確認する方法は？

React NativeでAsyncStorageにいくつかのアイテムを保存し、chromeデバッガーとiOSシミュレーターを使用しています。

ネイティブのリアクションなしで、通常のWeb開発localStorageを使用して、Chrome Debugger > Resources > Local Storageの下に格納されたlocalStorageアイテムを見ることができました

React Native AsyncStorage保存済みアイテムを表示する方法はありますか？

react-nativeasyncstorage
23
Wonka

あなたはreactotronを使用することができます、私はそれが非同期ストレージエクスプローラを持っていると思います;） https://github.com/infinitered/reactotron

enter image description here

32
Fareed Alnamrouti

React Native Debugger にはこれが組み込まれています。

RNDコンソールでshowAsyncStorageContentInDev()を呼び出すだけで、アプリのストレージのダンプを確認できます。

33
Jayden

以下が機能するはずです、

AsyncStorage.getAllKeys((err, keys) => {
  AsyncStorage.multiGet(keys, (error, stores) => {
    stores.map((result, i, store) => {
      console.log({ [store[i][0]]: store[i][1] });
      return true;
    });
  });
});
4
skantus

bluebird でこれを行うことができます：

const dumpRaw = () => {
  return AsyncStorage.getAllKeys().then(keys => {
    return Promise.reduce(keys, (result, key) => {
      return AsyncStorage.getItem(key).then(value => {
        result[key] = value;
        return result;
      });
    }, {});
  });
};

dumpRaw().then(data => console.log(data));
2
Tim Scott

1つのオブジェクトにすべてのストレージを記録するヘルパーメソッドを作成しました（たとえばReactotronで記録する方がクリーンです）。

import AsyncStorage from '@react-native-community/async-storage';

export function logCurrentStorage() {
  AsyncStorage.getAllKeys().then((keyArray) => {
    AsyncStorage.multiGet(keyArray).then((keyValArray) => {
      let myStorage: any = {};
      for (let keyVal of keyValArray) {
        myStorage[keyVal[0]] = keyVal[1]
      }

      console.log('CURRENT STORAGE: ', myStorage);
    })
  });
}
1
miqrc

Reactotronがあらゆる種類のプリティプリンティングを有効にしているとは思っていませんでした。アンダースコアも使用できます。

すべてのキーの静的マッピングがあると仮定します...

const keys = {
  key1: 'key1',
  key2: 'key2'
}

export function printLocalStorage() {
  _.forEach(keys, (k, v) => {
    localStore.getAllDataForKey(v).then(tree => {
      console.log(k) // Logs key above the object
      console.log(tree) // Logs a pretty printed JSON object
    })
  })
}

パフォーマンスは良くありませんが、問題は解決します。

0
Phil Andrews

Asyncおよびawaitを使用して、すべてのキーを取得する関数を定義できます

    getAllkeys = () => {
    return new Promise( async (resolve, reject) => {
    try {
      let keys = await AsyncStorage.getAllKeys();
      let items = await AsyncStorage.multiGet(keys)
      resolve(items)
    } catch (error) {
      reject(new Error('Error getting items from AsyncStorage: ' + error.message))
    }
  });
}


    somefunc = async () => {
    try {
    var items = await getAllkeys();
    var someItems = items.filter(function (result, i, item) {
          // do filtering stuff
          return item;
    });
    // do something with filtered items 
    } catch (error) {
    // do something with your error
    }
}
0
Ahmed Rebai