web-dev-qa-db-ja.com

AsyncStorageのsetItemの正しい方法

AsyncStorage.setItem内でAsyncStorage.getItemを使用したい。それを正しい方法で行うには？

私のコードは次のとおりです：

createVehicle: function (vehicle, cb) {
    AsyncStorage.getItem('vehicle')
    .then(json => {

        let vehicles = [];

        if (json) {
            vehicles = JSON.parse(json);
            let o_vehicle = filter(vehicles, {autralis_id: vehicle.autralis_id});
            if (o_vehicle.length > 0) {
                cb(o_vehicle[0].id);
                return;
            } else {
                vehicles.Push(vehicle);
            }
        } else {
            vehicles.Push(vehicle);
        }
        AsyncStorage.setItem('vehicle', JSON.stringify(vehicles), () => {
            cb(vehicle.id + 1)
        });
    }).done();
},

それは正しい方法ですか？

react-nativeasyncstorage
8
Boky

Storageのサービスを作成しました。必要なパラメーターを渡すことで、必要に応じてプロジェクト全体で使用できます。見てください：

export default {
async setItem(key, value) {
    try {
        return await AsyncStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
        // console.error('AsyncStorage#setItem error: ' + error.message);
    }
},
async getItem(key) {
    return await AsyncStorage.getItem(key)
        .then((result) => {
            if (result) {
                try {
                    result = JSON.parse(result);
                } catch (e) {
                    // console.error('AsyncStorage#getItem error deserializing JSON for key: ' + key, e.message);
                }
            }
            return result;
        });
},
async removeItem(key) {
    return await AsyncStorage.removeItem(key);
}
}

これは、これまでに私が出会ったベストプラクティスです。あなたもそれを使うべきです。

8
atitpatel
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'
class AsyncStorageExample extends Component {
   state = {
      'name': ''
   }
   componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 
'name': value }))
   setName = (value) => {
      AsyncStorage.setItem('name', value);
      this.setState({ 'name': value });
   }
   render() {
      return (
     <View style = {styles.container}>
        <TextInput style = {styles.textInput} autoCapitalize = 'none'
        onChangeText = {this.setName}/>
        <Text>
           {this.state.name}
        </Text>
     </View>
      )
   }
}
export default AsyncStorageExample
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      alignItems: 'center',
      marginTop: 50
   },
   textInput: {
      margin: 5,
      height: 100,
      borderWidth: 1,
      backgroundColor: '#7685ed'
   }
})
1
Shivo'ham 0

手遅れになるかどうかはわかりませんが、私はこれを自分で書きました。

import { Base64 } from 'js-base64';
import { AsyncStorage } from 'react-native';

export async function storeItem(key: string, item: string, isJson: boolean) {
    try {
        return new Promise(async resolve => {
            let stringObject = '';
            if (isJson) {
                stringObject = JSON.stringify(item);
            } else {
                stringObject = item.toString();
            }
            let base64Object = await Base64.encode(stringObject);
            await AsyncStorage.setItem(key, base64Object);
            resolve();
        });
    } catch (e) {
        console.log(e);
    }
}

export async function retrieveItem(key: string, isJson: boolean) {
    try {
        return new Promise(async resolve => {
            let base64Item = await AsyncStorage.getItem(key);
            if (base64Item === null) {
                resolve(null);
            }
            let item = await Base64.decode(base64Item);
            resolve(isJson ? JSON.parse(item) : item);
        });
    } catch (e) {
        console.log(e);
    }
}

export async function removeItem(key: string) {
    try {
        return new Promise(async resolve => {
            await AsyncStorage.removeItem(key);
            resolve();
        });
    } catch (e) {}
}

特殊文字のため、base64を使用します。

それが役に立てば幸い:)

0
JulienBlc

これを参照してください 公式ドキュメント 、getItem内部setItemを使用しているため、setItem内部getItemも使用できると思います、なぜなら、戻り値はPromiseとgetItemの両方の単なるsetItemだからです。

AsyncStorage.setItem('UID123', JSON.stringify(UID123_object), () => {
  AsyncStorage.mergeItem('UID123', JSON.stringify(UID123_delta), () => {
    AsyncStorage.getItem('UID123', (err, result) => {
      console.log(result);
    });
  });
});
0
yifan_z