React Native - 非同期AsyncStorage.getItemsのデータを表示する

Question

基本的に、私のアプリでは、チャレンジに成功したときにユーザーが検証する必要があります。 彼らは検証]ボタンをクリックすると、私は「キー」保存：機能と挑戦の「価値」：

async function validate(challenge_nb) 
{ 
try { 
    await AsyncStorage.setItem(challenge_nb, 'OK'); 
} catch (error) { 
    console.log("error") 
} 
} 

それは正常に動作します。

今、私はそのデータを取得してリストに表示したいと思います。それをどうやって行うのか分かりません。

私は私が保存されたすべてのキー/値を取得するための関数のようなものを使用しようとしていた。）

async function getalldatas() 
{ 
AsyncStorage.getAllKeys((err, keys) => { 
AsyncStorage.multiGet(keys, (err, stores) => { 
stores.map((result, i, store) => { 
    // get at each store's key/value so you can work with it 
    let key = store[i][0]; 
    let value = store[i][1]; 
    console.log(value); 
    }); 
}); 

を}; （

レンダリング： }

しかし、私はそれが実際に

非同期（async）です。また原因...私のレンダリング（）関数内でそれを表示する方法を知りませんが、私はのようなものをやりたいです各キー/値の場合 ： キー：値 end_foreach ）

どうもありがとう！

Answer 1

状態値に格納してから条件付きレンダリングを行うことができます。あなたのレンダーにこれのようなものを置かないで、コンポーネントのメソッドにしてください：

getAllDatas =() => { 
    AsyncStorage.getAllKeys((err, keys) => { 
    AsyncStorage.multiGet(keys, (err, stores) => { 
     this.setState({ stores }); 
    }); 
    }); 
} 

render() { 
    return (
    <View> 
     {this.state.stores.length && this.state.stores.map(item => 
     <Text>{`${item[0]}: ${item[1}`}</Text>)} 
    </View> 
) 
}