React Native asyncstorage récupère les données après le rendu
J'utilise AsyncStorage dans ComponentWillMount pour obtenir localement stocké accessToken, mais il renvoie la promesse après l'exécution de la fonction render(). Comment puis-je faire en sorte que render() attende que la promesse soit terminée? Merci.
3 réponses
Vous ne pouvez pas faire attendre render autant que je sache. Ce que j'ai fait dans l'application sur laquelle je travaille est d'ajouter un écran de chargement jusqu'à ce que cette promesse de AsyncStorage se résout. Voir l'exemple ci-dessous:
import React, {
AsyncStorage,
View,
Text
} from 'react-native';
class Screen extends React.Component {
state = {
isLoading: true
};
componentDidMount() {
AsyncStorage.getItem('accessToken').then((token) => {
this.setState({
isLoading: false
});
});
},
render() {
if (this.state.isLoading) {
return <View><Text>Loading...</Text></View>;
}
// this is the content you want to show after the promise has resolved
return <View/>;
}
}
La définition de la propriété isLoading sur l'objet state provoquera un nouveau rendu, puis vous pourrez afficher le contenu qui repose sur accessToken.
Sur une note de côté, j'ai écrit une petite bibliothèque appelée react-native-simple-store qui simplifie la gestion des données dans AsyncStorage. Espérer vous le trouverez utile.
Basé sur réagir indigènes doc, vous pouvez faire quelque chose comme ceci:
import React, { Component } from 'react';
import {
View,
} from 'react-native';
let STORAGE_KEY = '@AsyncStorageExample:key';
export default class MyApp extends Component {
constructor(props) {
super(props);
this.state = {
loaded: 'false',
};
}
_setValue = async () => {
try {
await AsyncStorage.setItem(STORAGE_KEY, 'true');
} catch (error) { // log the error
}
};
_loadInitialState = async () => {
try {
let value = await AsyncStorage.getItem(STORAGE_KEY);
if (value === 'true'){
this.setState({loaded: 'true'});
} else {
this.setState({loaded: 'false'});
this._setValue();
}
} catch (error) {
this.setState({loaded: 'false'});
this._setValue();
}
};
componentWillMount() {
this._loadInitialState().done();
}
render() {
if (this.state.loaded === 'false') {
return (
<View><Text>Loading...</Text></View>
);
}
return (
<View><Text>Main Page</Text></View>
);
}
}
React-native est basé sur Javascript qui ne prend pas en charge les fonctions de blocage.Cela a également du sens car nous ne voulons pas que l'interface utilisateur soit bloquée ou ne réponde pas. Ce que vous pouvez faire est de gérer cela dans la fonction de rendu. c'est-à-dire Qu'un écran de chargement le rend à nouveau lorsque vous obtenez les informations de AsyncStorage