React Native Async Storageで作業することができません

Question

反応したネイティブの非同期ストレージで作業するのが難しいです。 ほとんどの場合、私のコードは現在の実行から飛び越して、現在の行から結果を得ることなく次の行に移動します。私はほとんどの時間、エラーが発生しています。

私は、これは

'use strict'; 

var React = require('react-native'); 
var { 
    AsyncStorage, 
    PickerIOS, 
    Text, 
    View 
} = React; 
var PickerItemIOS = PickerIOS.Item; 

var STORAGE_KEY = '@AsyncStorageExample:key'; 
var COLORS = ['red', 'orange', 'yellow', 'green', 'blue']; 

var BasicStorageExample = React.createClass({ 
    componentDidMount() { 
    this._loadInitialState().done(); 
    }, 

    async _loadInitialState() { 
    try { 
     var value = await AsyncStorage.getItem(STORAGE_KEY); 
     if (value !== null){ 
     this.setState({selectedValue: value}); 
     this._appendMessage('Recovered selection from disk: ' + value); 
     } else { 
     this._appendMessage('Initialized with no selection on disk.'); 
     } 
    } catch (error) { 
     this._appendMessage('AsyncStorage error: ' + error.message); 
    } 
    }, 

    getInitialState() { 
    return { 
     selectedValue: COLORS[0], 
     messages: [], 
    }; 
    }, 

    render() { 
    var color = this.state.selectedValue; 
    return (
     <View> 
     <PickerIOS 
      selectedValue={color} 
      onValueChange={this._onValueChange}> 
      {COLORS.map((value) => (
      <PickerItemIOS 
       key={value} 
       value={value} 
       label={value} 
      /> 
     ))} 
     </PickerIOS> 
     <Text> 
      {'Selected: '} 
      <Text style={{color}}> 
      {this.state.selectedValue} 
      </Text> 
     </Text> 
     <Text>{' '}</Text> 
     <Text onPress={this._removeStorage}> 
      Press here to remove from storage. 
     </Text> 
     <Text>{' '}</Text> 
     <Text>Messages:</Text> 
     {this.state.messages.map((m) => <Text key={m}>{m}</Text>)} 
     </View> 
    ); 
    }, 

    async _onValueChange(selectedValue) { 
    this.setState({selectedValue}); 
    try { 
     await AsyncStorage.setItem(STORAGE_KEY, selectedValue); 
     this._appendMessage('Saved selection to disk: ' + selectedValue); 
    } catch (error) { 
     this._appendMessage('AsyncStorage error: ' + error.message); 
    } 
    }, 

    async _removeStorage() { 
    try { 
     await AsyncStorage.removeItem(STORAGE_KEY); 
     this._appendMessage('Selection removed from disk.'); 
    } catch (error) { 
     this._appendMessage('AsyncStorage error: ' + error.message); 
    } 
    }, 

    _appendMessage(message) { 
    this.setState({messages: this.state.messages.concat(message)}); 
    }, 
}); 

exports.title = 'AsyncStorage'; 
exports.description = 'Asynchronous local disk storage.'; 
exports.examples = [ 
    { 
    title: 'Basics - getItem, setItem, removeItem', 
    render(): ReactElement { return <BasicStorageExample />; } 
    }, 
]; 

この作品を例 - 試してみました。しかし、私の機能は期待通りに機能しません。私はundefinedを得ています。

Answer 1

あなたの質問を読んだ後、私が感じた最初のことは、あなたがES7を初めて使った、たぶんasync-awaitです。今年後半（2016年）に再販売されるES7の機能については、async-awaitをお読みください。

機能はasyncである必要があります。関数の前にキーワードを置きます。関数を呼び出す場合は、awaitを使用する必要があります。

具体的には、開発のためにreact-native-storeレポを使用することをお勧めします。 Reactネイティブの人たちは、これと他の実装を明確に同意して使用するように言いました。AsyncStorageは少し複雑です。

Answer 2

まだこの問題を解決できなかった人は：Reactの代わりにreact-nativeからAsyncStorageをインポートしてください。誰かがAsyncStorage.multiSet([])を使用している場合には

import { AsyncStorage } from 'react-native'; 

Answer 3

、自分の価値観のどれもnullまたはundefinedされていないことを確認してください。さもなければ、それは働かず、有効なキーと値のペアに値を設定しません。