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();
},
それは正しい方法ですか?
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);
}
}
これは、これまでに私が出会ったベストプラクティスです。あなたもそれを使うべきです。
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'
}
})
手遅れになるかどうかはわかりませんが、私はこれを自分で書きました。
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を使用します。
それが役に立てば幸い:)
これを参照してください 公式ドキュメント 、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);
});
});
});