AsyncStorage with ListViewネイティブ

Question

こんにちは私は、ユーザーがお気に入りとして保存したものを表示できるリストを持つ画面を作りたいと思っています。元のjsonファイルを使用して元のデータを保持します。そこから私はお気に入りのデータをAsyncStorageに保存したいと思っています。 AsyncStorageは約束を返し、私はそれを状態に加えることができません。どうすればいいですか？あなたは約束としてそれに対処しなければならないので、

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
let a 
export default class List extends React.Component { 


    constructor(props) { 
    let resultData = new Array; 
    super(props) 
    const dataPoem = AsyncStorage.getItem('PoemDB', (err, result) => { 
     a = JSON.parse(result) 
     return result 

    }); 

    console.log 
    this.state = { 
    dataSource: ds.cloneWithRows(dataPoem), 
     counter: 1, 
     fontLoaded: false, 
    }; 

    } 

Answer 1

あなたが言ったように、AsyncStorage.getItem、約束を返します。

AsyncStorage.getItem()からの応答に依存する必要がありますので、処理されている可能性があります。これはthenを使って対処できます。約束が返されると、状態は非同期に設定されます。

var dataPoem = function(){ 
    AsyncStorage.getItem('PoemDB').then((data) => { 
     this.setState({ 
     dataSource: ds.cloneWithRows(data), 
     }); 
    }); 
} 

それともawait、ES7に付属の概念を使用して約束を扱うことができます。 ドキュメント（https://facebook.github.io/react-native/docs/asyncstorage.html）から例：

try { 
    const value = await AsyncStorage.getItem('@MySuperStore:key'); 
    if (value !== null){ 
    // We have data!! 
    console.log(value); 
    } 
} catch (error) { 
    // Error retrieving data 
} 

それとも、あなたがあなた自身の約束を作成し、resolveを使用して約束を返すことができます：

var getFavouriteData = new Promise(function(resolve, reject){ 
    AsyncStorage.getitem().then((data) => { 
    resolve(data); 
    }); 
}); 

Answer 2

あなたは条件付き状態を作る必要はありません。この

constructor(props) { 

    super(props); 
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 

    this.state = { 
     dataSource: ds 
    } 

    } 

    componentDidMount = async() => { 
    try { 
     const value = await AsyncStorage.getItem('@MySuperStore:key'); 
     if (value !== null) { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(JSON.parse(value)) 
     }); 
     } 
    } catch (error) { 
     // Error retrieving data 
    } 

    } 

でレンダリング

render() { 
    return (
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(data) => this.renderRow(data)} 
     /> 
    ); 
    } 



renderRow = (data) => { 
    return (
    console.log(data); 
     <View> 
     <Text>.....<Text> 
     </View> 
    ); 
    } 

これが他の人に役立つことを願っています！