Невозможно работать с React Native Async Storage

Question

У меня возникли трудности с работой с адаптивным хранилищем async. В большинстве случаев мой код сбрасывается с текущего исполнения и переходит к следующей строке, не получая результаты от текущей строки. Я получаю ошибки большую часть времени.

Я попытался это ПРИМЕР-

'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. Пожалуйста, прочитайте о функциях async-await в ES7, который должен быть представлен позднее в этом году (2016).

Ваши функции должны быть async в природе. Поместите ключевое слово перед функцией. И await должен использоваться там, где вы вызываете функцию.

В частности, я предлагаю вам использовать react-native-store репо для вашей разработки. React Native guys сказали, что используют эту и другие реализации, четко соглашаясь с AsyncStorage, с которыми сложно работать.

Answer 2

Для других, которые все еще не смогли исправить эту проблему: импортируйте AsyncStorage из native-native вместо React.

import { AsyncStorage } from 'react-native'; 

Answer 3

В случае, если кто-то использует AsyncStorage.multiSet([]), убедитесь, что ни одно из значений не является null или undefined. В противном случае он не будет работать и не будет устанавливать значение для действительных пар ключ-значение.