2016-01-16 10 views
10

Ho difficoltà a lavorare con reagire alla memorizzazione asincrona nativa. La maggior parte delle volte il mio codice salta l'esecuzione corrente e passa alla riga successiva senza ottenere i risultati dalla riga corrente. La maggior parte delle volte ricevo errori.Impossibile lavorare con React Native Async Storage

Ho provato questo esempio-

'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 />; } 
    }, 
]; 

Questo funziona. Ma le mie funzioni non funzionano come previsto. Sto ottenendo undefined.

+0

Puoi essere più specifico sugli errori che ricevi? Inoltre, a che punto del codice stai ricevendo questi errori? –

+0

Non ricevo alcun errore. L'ordine delle funzioni non è in esecuzione come voglio. La risposta di Lokesh sembra essere una soluzione per me. quel repository git sembra così semplice da implementare. –

risposta

5

Dopo aver letto la tua domanda, la prima cosa che ho sentito è "forse" che sei nuovo di ES7, in particolare async-await. Si prega di leggere le funzioni async-await in ES7 che sta per essere rilasciata entro la fine dell'anno (2016).

Le vostre funzioni devono essere async in natura. Metti la parola chiave prima della funzione. E await deve essere utilizzato quando si effettua una chiamata alla funzione.

In particolare, suggerisco di utilizzare il repository react-native-store per il vostro sviluppo. Reagire ai ragazzi indigeni hanno detto di usare questa e altre implementazioni chiaramente concordando che AsyncStorage è un po 'complesso con cui lavorare.

+0

WoW! sembra una grande implementazione del negozio nativo reattivo. l'esempio è così semplice. farò un tentativo. e grazie per avermi detto dell'attesa asincrona. –

13

Per gli altri che ancora non sono riusciti a risolvere il problema: importare AsyncStorage da react-native anziché React.

import { AsyncStorage } from 'react-native'; 
+1

Questo dovrebbe essere nella parte superiore. Non è nei documenti e gli errori che ottieni non sono descrittivi. –

0

Nel caso in cui qualcuno sta usando AsyncStorage.multiSet([]), assicurarsi che nessuno dei vostri valori è null o undefined. Altrimenti, non funzionerà e non imposterà valore sulle coppie valore-chiave valide.